无法访问 React 中的嵌套 JSON 对象

我有一个简单的 React 组件，并尝试在中显示嵌套的 JSON 对象render.

// React Component

class NodeDetail extends React.Component {
  constructor(props) {
    super(props);
    const node = {};

    this.state = {
      node
    }
  }

  componentDidMount() {
    Node.getNode(this.props.node_id).then((result) => {
      console.log(result.data);
      this.setState(() => ({node: result.data}));
    }).catch(function(error) {
      // TODO: handle error
    });
  }

  render() {
    return (
      <div>
        {this.state.node.node_status.name}
      </div>
    );
  }
};

export default NodeDetail;

这是 JSON（存储在result.data) 从 Rails API 返回（为简洁起见，删除了一些字段）：

{  
   "id":1234,
   "name":"some-node",
   "created_at":"2018-05-18T15:23:24.012Z",
   "hostname":"some-host",
   "ip":"10.XXX.XXX.XXX",
   "mac":"24:6e:96:XX:11:XX",
   "node_status":{  
      "id":2,
      "name":"Parked"
   }
}

当我访问 React 中的根级别属性时this.state.node.mac，它返回24:6e:96:XX:11:XX.

当我尝试访问name属性在node_status using this.state.node.node_status.name，我收到以下错误：

Uncaught TypeError: Cannot read property 'name' of undefined

我也尝试过this.state.node['node_status'].name，和同样的错误。

为什么我无法在 JSON 中访问该对象，而它显然就在那里？

我敢打赌这是因为您对 Rails API 的调用是异步的——所以您的NodeDetail组件尝试在 API 返回数据/状态之前渲染result.data...尝试设置一个不存在的条件node_status正如其他一些答案所建议的那样。

因此当前（错误）的数据流将是：

1. constructor. state被设定为{node: {}}
2. componentDidMount。调用 API。
3. render。抛出异常，因为this.state.node.node_status is undefined。组件损坏并且不会再次渲染...
4. API返回。state被设定为result.data. result.data被记录到您的控制台。

你可以做的是这样的：

render() {
    if (!this.state.node.node_status) {
      return null;
    }

    return (
      <div>
        {this.state.node.node_status.name}
      </div>
    );
  }

或任何其他建议来解释undefined的价值this.state.node.node_status.

一般来说，您需要确保您的render即使使用默认值，方法也能工作state中设置的值constructor.