类型错误：无法读取未定义的属性“类别”

Question

代码：const JoinContent = props => {const {data} = props;console.log(data);return ( <h1>{data.Category}</h1> );};在控制台日志上我得到{   Category: "a",   Logo: "/static/media/army.a5445eab.svg",   Eligibility: "a",   Exams: "abc" }我在数据中有类别，但在 { data.Category } 上它抛出错误Cannot read Property Category of Undefined我正在研究 React 并使用 Hooks、Context。

Answer 1

如果数据是异步加载的并且它在第一次渲染时不存在，则可能会导致问题。

你有多种方法来解决它

1. data如果道具中不存在，则初始化为空对象

const {data = {}} = props;
return (<h1>{data.Category}</h1>);

1. 渲染前检查是否data.Category存在

return data?.Category && <h1>{data.Category}</h1>;

我更喜欢第二种方法，因为即使data.Category第一种方法中不存在，也会呈现空的 h1 标签