类型错误： 无法读取未定义的属性'Category'

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" 
}

我在数据中有Category，但在｛data.Category｝上它抛出了一个错误Cannot read Property Category of Undefined

我正在研究React并使用Hooks，Context。

Answer 1

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

你有多种方法来解决它

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

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

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

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

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