Can'；t在ReactJS状态内渲染数组

我正在从外部API获取食品配方的数据，并以以下格式（JSON）获得响应：

为了测试的目的，我试图访问数据并显示变量“count”，以及数组中第一个配方的“publisher”。这是我的代码：

import React from 'react';

import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }

  componentDidMount() {
    fetch('https://www.food2fork.com/api/search?key=MY_KEY&q=chicken%20breast&page=2')
    .then(response => {
      return response.json();
    })
    .then(jsonData => {
      this.setState({ data: jsonData }, function() {
        console.log(jsonData);
      });
    });
  }

  render() {
    return (
      <div className="App">
        <h1>{this.state.data.count}</h1>
        <p>{this.state.data.recipes[0].publisher}</p> // Why this doesn't work?
      </div>
    );
  }
};

从“React”导入React；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:{}}；
}
componentDidMount（）{
取（'https://www.food2fork.com/api/search?key=MY_KEY&q=chicken%20breast&page=2')
。然后（响应=>{
返回response.json（）；
})
.然后（jsonData=>{
this.setState（{data:jsonData}，function（））{
console.log（jsonData）；
});
});
}
render（）{
返回(
{this.state.data.count}
{this.state.data.recipes[0].publisher}
//为什么这不起作用？
);
}
};

如果在render（）函数中删除“p”标记，一切都会按预期进行：首先加载页面，然后在获取数据后，将“30”显示为“h1”。
但是，如果使用“p”标记运行代码，则会出现以下错误：

---

我已经找了两个多小时的答案，真的找不到答案。为什么我可以访问变量“count”，而不能访问数组中的变量“publisher”？设置后，我将注销此.state事件，并且该对象在那里看起来完全正常。如何访问“recipes”数组中的元素？

这是因为当您当时提取数据时，呈现组件时出现错误，错误为This.state.data仍然是{}因此This.state.data.recipes[0]尚未定义，因为提取请求未完成（需要一些时间）。要解决此问题，您必须返回2个条件

当fetch正在运行时（正在加载）

2） 获取完成时

 render() {
   if(!this.state.data.recipes){
    // if the fetch request is still not completed
    return (
       <div>
      <h1>Loading .... </h1>
       </div>
     )
   }
 // run when fetch request is completed and this.state.data is now assigned some data
    return (
      <div className="App">
        <h1>{this.state.data.count}</h1>
        <p>{this.state.data.recipes[0].publisher}</p> // Why this doesn't work?
      </div>
    );
  }

render（）{
如果（！this.state.data.recipes）{
//如果提取请求仍未完成
返回(
加载。。。。
)
}
//当获取请求完成并且this.state.data现在分配了一些数据时运行
返回(
{this.state.data.count}
{this.state.data.recipes[0].publisher}
//为什么这不起作用？
);
}

---

回答您的评论。 错误是无法读取未定义的属性0，这意味着此.state.data.recipes未定义，因此.state.data.recipes[0]是否存在错误？

但当您使用

this.state.data.count时，您并没有得到错误。由于它将打印未定义的，这是count的值（此时，您不会试图像
这样进一步打印.state.data.count.toString（）
，如果您这样做，则会出现错误无法读取未定义的的属性toString（）。


在then（）中，当您使用此.setState（）时，它将更新状态并重新渲染所有受影响的组件
 这是因为当您当时正在提取数据时，react呈现组件，您得到的错误为This.state.data仍然是{}因此This.state.data.recipes[0]尚未定义，因为提取请求未完成（需要一些时间）。要解决此问题，您必须返回2个条件

当fetch正在运行时（正在加载）
2） 获取完成时

 render() {
   if(!this.state.data.recipes){
    // if the fetch request is still not completed
    return (
       <div>
      <h1>Loading .... </h1>
       </div>
     )
   }
 // run when fetch request is completed and this.state.data is now assigned some data
    return (
      <div className="App">
        <h1>{this.state.data.count}</h1>
        <p>{this.state.data.recipes[0].publisher}</p> // Why this doesn't work?
      </div>
    );
  }

render（）{
如果（！this.state.data.recipes）{
//如果提取请求仍未完成
返回(
加载。。。。
)
}
//当获取请求完成并且this.state.data现在分配了一些数据时运行
返回(
{this.state.data.count}
{this.state.data.recipes[0].publisher}
//为什么这不起作用？
);
}


回答您的评论。
错误是无法读取未定义的属性0，这意味着此.state.data.recipes未定义，因此.state.data.recipes[0]是否存在错误？


但当您使用
this.state.data.count时，您并没有得到错误。由于它将打印未定义的，这是count的值（此时，您不会试图像
这样进一步打印.state.data.count.toString（）
，如果您这样做，则会出现错误无法读取未定义的的属性toString（）。


在then（）中，当您使用此.setState（）时，它将更新状态并重新渲染所有受影响的组件
 谢谢，它很管用！但我仍然不明白-怎么可能一部分数据（count变量中的一部分可用，而另一个数组不可用？JSON可能部分加载？而且，我认为then（）函数将处理，并在设置状态后进行渲染。这意味着状态是一部分一部分地设置的？谢谢，它可以工作！但我仍然没有得到它-数据的一部分怎么可能（在'count'变量中有一个可用，而另一个数组不可用？JSON可以部分加载？另外，我认为then（）函数将处理，并在设置状态后呈现。这意味着状态是一部分一部分地设置的吗？