React Uncaught TypeError:无法读取未定义的属性 [property_name]
我正在从父组件传递一个属性
<CampersList _data={this.state.data}/>
,请帮我理解一下,我应该如何获取属性
_data[0].updated.$t
。
目前它返回一个错误:
这是子组件的代码:
class CampersList extends React.Component {
constructor(props) {
super(props);
}
render() {
let campersNodes = this.props._data.map((element, index) => {
return (
<Camper user={element} index={index} key={index}/>
);
});
let updateDate = this.props._data[0].updated.$t;
return (
<div>
<table>
<tbody>
{campersNodes}
</tbody>
</table>
<p>{updateDate}</p>
</div>
)
}
}
但如果我将
let updateDate = this.props._data[0].updated.$t;
缩减为
let updateDate = this.props._data[0];
然后它会抛出不同的错误:
此错误意味着 data[0] 未定义。
简而言之,react 需要几毫秒来更新其 props,直到那时它们才未定义。因此最初
data[0] 未定义
。
解决方案 1:要解决此问题,请尝试将它们放在
if
条件中。
if(this.props._data[0]) {
//code
}
解决方案 2:使用 getDefaultProps ,它提供默认 props。此解决方案由 react 推荐
getDefaultProps() {
return {
_data: []
};
}
我们通常在 React 中遇到此类问题。原因是执行渲染方法时数据可能对您不可用,您必须通过某些网络调用来获取数据。 您可以使用一些条件语句,例如:
let updateDate = this.props._data[0] ? this.props._data[0].updated.$t : null;
如果
this.props._data[0].updated
未定义,这将再次遇到麻烦。
因此,您必须再次嵌套以检查变量是否已定义。
Lodash
为您提供了一些很酷的方法,例如
get
来处理这种情况。
只需使用:
let updateDate = _.get(this.props, '_data[0].updated.$t', 'Default Value');