React Uncaught TypeError：无法读取undefined的属性[property_name]

Question

我从父组件<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];然后它抛出了我不同的错误：

Answer 1

我们通常会面临这样的问题。原因是当执行render方法时，您可能无法使用数据，您必须通过某些网络调用获取数据。 您可以使用一些条件语句，如：

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');

Answer 2

此错误表示数据[0]未定义。

简单来说，反应需要几毫秒来更新它的道具，直到它们未定义。所以最初是data[0] is undefined。

解决方案1：要解决此问题，请尝试将其置于if条件下。

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

解决方案2：使用getDefaultProps，它会提供默认道具。反应建议使用此解决方案

getDefaultProps() {
  return {
     _data: []
  };
}