TypeError：无法读取未定义的属性“类别”

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标签