無法訪問 React 中的嵌套 JSON 對象

Question

我有一個簡單的 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;

這是從 Rails API 返回的 JSON（存儲在result.data ）（為簡潔起見，刪除了一些字段）：

{  
   "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"
   }
}

當我使用this.state.node.mac訪問 React 中的根級別屬性時，它返回24:6e:96:XX:11:XX 。

當我嘗試使用this.state.node.node_status.name訪問node_status的name屬性時， node_status以下錯誤：

Uncaught TypeError: Cannot read property 'name' of undefined

我也試過this.state.node['node_status'].name ，和同樣的錯誤。

為什么我不能在 JSON 中訪問這個對象，當它顯然存在時？

Answer 1

我敢打賭這是因為你對 Rails API 的調用是異步的——所以你的NodeDetail組件會在 API 返回數據之前嘗試渲染/狀態設置為result.data ...嘗試為不存在的node_status設置一個條件作為一些其他答案的建議。

所以當前（錯誤的）數據流將是：

1. constructor 。 state設置為{node: {}}
2. componentDidMount 。 調用 API。
3. render 。 拋出異常，因為this.state.node.node_status是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>
    );
  }

或者任何其他建議來解釋this.state.node.node_status的undefined值。

通常，您需要確保您的render方法能夠工作，即使在您的constructor設置了默認state值。

Answer 2

錯誤即將正確您正在加載組件后獲取data簡而言之，您正在componentDidMount中調用您的 API 您可以通過這種方式擺脫此錯誤

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

我建議您在componentWillMount或constructor函數中調用獲取數據 API，這是component的初始階段。

Answer 3

在渲染中

newsapi_news.spacy_tags是一個[object object]

newsapi_news.spacy_tags.all_tags THROWS 無法讀取未定義錯誤的道具

但這會起作用

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

渲染中的代碼必須“編譯”或安裝或任何術語，並且父元素尚未定義，但父元素的父元素是

Answer 4

唯一對我有用的解決方案： https : //stackoverflow.com/a/51175467

問題是 JSON 對象可以在填充之前訪問一級深度，因此在您嘗試訪問嵌套屬性之前它不會破壞您的網頁。