Javascript Can'；t访问React中的嵌套JSON对象

我有一个简单的React组件，正在尝试在

render

中显示一个嵌套的JSON对象

// 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;

当我访问React with

this.state.node.mac

中的根级别属性时，它返回

24:6e:96:XX:11:XX

当我尝试使用

this.state.node.node\u status.name

访问

node\u status

中的

name

属性时，出现以下错误：

未捕获类型错误：无法读取未定义的属性“name”

我还尝试了

this.state.node['node\u status'].name

，但出现了相同的错误

---

为什么我不能在JSON中访问这个对象，当它明显存在时？

我打赌这是因为您对Rails API的调用是异步的——因此您的

NodeDetail

组件尝试在API返回数据/状态设置为

结果之前进行渲染。data

…尝试将不存在的

节点状态设置为一个条件，就像其他一些答案一样建议

因此，当前（错误）数据流将为：

构造函数
<代码>状态

设置为

{node:{}

componentDidMount

。调用API

渲染

。引发异常，因为

此.state.node.node\u状态为
未定义
。组件将断开并且不会再次渲染

API返回<代码>状态设置为

结果。数据

<代码>结果。数据将记录到控制台

您可以做的是：

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

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

render（）{
if（！this.state.node.node_status）{
返回null；
}
返回(
{this.state.node.node_status.name}
);
}

或解释

此.state.node.node\u状态的
未定义的
值的任何其他建议

一般来说，您需要确保您的
render
方法能够正常工作，即使在
构造函数中设置了默认的
状态
值
，错误正在纠正，您正在获取
数据
在加载组件后，简而言之，您正在
componentDidMount
中调用API
你可以用这种方法摆脱这个错误

 <div>
        {this.state.node.node_status?this.state.node.node_status.name:""}
 </div>


{this.state.node.node_状态？this.state.node.node_状态。名称：'}

我建议您在
componentWillMount
或
constructor
中调用fetchdataapi，这是渲染中
component
的初始阶段

newsapi\u news.spacy\u tags
是一个
[object object]

newsapi\u news.spacy\u标签。所有标签
THROWS无法读取未定义错误的道具

但这会奏效的

data-tag={(newsapi_news.spacy_tags) ? newsapi_news.spacy_tags.all_tags : ""}

渲染中的代码必须“编译”或装入，或者不管术语是什么，并且父元素尚未定义，但父元素的父元素是
什么this.state.node.node\u statusreturn？@LGSonthis.state.node.node\u status返回未定义的。但它确实存在。用
console.log（result.data）验证了这一点节点_状态
，像这样，
this.setState（（）=>（{node:result.data.node_status}））
然后执行
this.state.node.name
下面给出@user的答案，当您尝试
this.state.node.mac
（您编写的方法有效）时，您是否也在
render
方法中执行了该操作？这是一个异步调用，需要node_状态（存在DB约束）。如果
console.log（结果数据）显示节点\状态存在，我不认为这是竞争条件。它不是“竞争条件”，而是异步Javascript…React将在API返回数据之前尝试呈现组件，因此它不知道存在DB约束。基本上可以保证在浏览器中呈现组件的速度比API快…使用React，您需要确保
render
始终有效，即使该方法使用默认的
state
值。那么如何解释
this.state.node.mac
有效，哪个是
node\u status
的前一个对象属性？因为您在API返回数据后记录
this.state.node.mac
。如果您尝试在
render
方法中记录
this.state.node.mac
，它也将失败…尝试：-）这解决了它，在我的例子中，我正在执行{row.product_feed.id？row.product_feed.id:“-”}，它说id未定义。将支票缩小到row.product\u feed并使其生效。很高兴听到这个消息！。我自己也在努力解决这个问题，这对我来说很有效。谢谢。这太完美了，没想到：）
data-tag={(newsapi_news.spacy_tags) ? newsapi_news.spacy_tags.all_tags : ""}