React Uncaught TypeError：无法读取未定义的属性[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

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

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

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

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

解决方案 2：使用getDefaultProps，它提供默认道具。 react推荐这个解决方案

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

Answer 2

我们通常会在 react 中遇到此类问题。原因是当 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');