开发者问题收集

React Uncaught TypeError:无法读取未定义的属性 [property_name]

2016-12-23
921

我正在从父组件传递一个属性 <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]; 然后它会抛出不同的错误:
在此处输入图片说明

2个回答

此错误意味着 data[0] 未定义。

简而言之,react 需要几毫秒来更新其 props,直到那时它们才未定义。因此最初 data[0] 未定义

解决方案 1:要解决此问题,请尝试将它们放在 if 条件中。

if(this.props._data[0]) {
  //code
}

解决方案 2:使用 getDefaultProps ,它提供默认 props。此解决方案由 react 推荐

getDefaultProps() {
  return {
     _data: []
  };
}
iamsaksham
2016-12-23

我们通常在 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');

Vikramaditya
2016-12-23