从包含API中的多个对象的数组中的值进行反应？

Question

我正在使用fetch方法使用下面编写的代码从我的react应用程序中的API检索数据。

componentDidMount(){
    let auth_token = localStorage.getItem("token");
    let header_obj = {"x-access-token": auth_token};
    fetch('http://example.com/xyz', {headers: header_obj})
    .then(response => response.json())
    .then(response => {
      this.setState({
        postData:response.data  //initially set to an empty array in constructor
      })
    })
    .catch(err => {
        console.log(err);
    });
  }

这很好用。它给出了确切的响应，即包含多个对象的数组

{
  "data": [
    {
        "title": "John Doe",
        "description": "Active User",
        "dates": "4th Jan 2018"
    },
    {....} //multiple objects
  ]
 }

现在，当我尝试从响应中访问任何对象时，比如

render() {
  const {postData} = this.state;
  return (
      <div>       
         <h1>{postData[0].username}</h1> 
      </div>
    )
 }

这给了我一个错误“TypeError：无法读取未定义的属性'用户名'”。我怎么解决这个问题？

Answer 1

这可能是因为在响应到达之前postData是空数组，因此postData[0]未定义。因此你的错误。

对于特定情况，您可以尝试以下方法：

 <h1>{postData[0] && postData[0].username}</h1> 

Answer 2

当postData尚不可用时，您必须检查案例，通常您可以显示加载器。 if条件取决于你如何开始你的状态，在我的回答中我假设你已经将postData作为null启动

render() {
      const {postData} = this.state;
      if (!postData) {
         return (<div>Loading...</div>
      }
      return (
          <div>       
             <h1>{postData[0].username}</h1> 
          </div>
        )
     }