从 JSON 中获取数据并显示它答案

【问题标题】：Fetching data from JSON and displaying it从 JSON 中获取数据并显示它
【发布时间】：2021-03-12 21:15:45
【问题描述】：

我正在尝试获取静态 JSON 文件的内容并将其显示在 react.js 中。我的代码基于Here 给出的示例代码可以编译，但是当我在浏览器中打开页面时，我收到以下错误消息：

TypeError: Cannot read property 'data' of null

这是我的组件：

import React, { Component } from 'react';

class UserList extends Component {

    async getData(){
       const res = await fetch('/static/users.json');
       const data = await res.json();
       console.log("Got Data : " + data.length);
       return this.setState(
            {data:data}
       );
    }

    componentDidMount()
    {
       this.getData();
    }

    render(){
        return (
          <ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
        )
    }
}

export default UserList;

【问题讨论】：

没有初始化状态的构造函数
我认为您正在返回 setState 函数，但实际上并未调用它。您可以从异步函数中运行setState，因此只需删除return。

标签： reactjs

【解决方案1】：

getData 是一个异步函数，setState 也是如此。这会在您的组件安装时间和渲染时间之间创建一个竞争条件。因此，您需要进行空检查。

import React, { Component } from 'react';

class UserList extends Component {

    async getData(){
       const res = await fetch('/static/users.json');
       const data = res.json();
       console.log("Got Data : " + data.length);
       return this.setState(
            {data:data}
       );
    }

    componentDidMount()
    {
       this.getData();
    }

    render(){
        return (
          <ul>{this.state && this.state.data && this.state.data.map(item => <li>{item.title}</li>)} </ul>
        )
    }
}

export default UserList;

【讨论】：

感谢您的帮助。我尝试了 null 检查，但仍然得到：TypeError: Cannot read property 'data' of null
看来this.state本身为null，不只是this.state.data
好吧，看来我也没有完全正确地用 await 解压 JSON 数据。所以，有了这个修复和 Levi's 修复，我已经让它工作了。所以我将 getData() 中的前几行替换为： const data = await fetch('/static/users.json').then(res => res.json());

【解决方案2】：

这是因为 setState 内部是异步更新的，并且在您的代码尝试读取数据时可能尚未设置。

你可以这样做：

 render(){
    return (
      <ul>{this.state.data && this.state.data.map(item => <li>{item.title}</li>)} </ul>
    )
}

这只会在this.state.data 不等于 null 时尝试映射您的数组。

***已编辑****

您还没有构建您的状态，这就是 null 检查不起作用的原因。

import React, { Component } from 'react';

class UserList extends Component {
constructor(props) {
  super(props);
  // Don't call this.setState() here!
   this.state = { 
      data: null,
   };
 }

async getData(){
   const res = await fetch('/static/users.json');
   const data = await res.json();
   console.log("Got Data : " + data.length);
   this.setState({data});
}

componentDidMount()
{
   this.getData();
}

render(){
    return (
      <ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
    )
}
}

export default UserList;

【讨论】：

【解决方案3】：

您的初始状态声明是错误的：

import React, { Component } from 'react';

class UserList extends Component {
  state = {
    data: []
  };
  
  // ...
}

export default UserList;

【讨论】：