Displaying fetched data issue : objects not valid as React child / TypeError : undefined

Question

我想使用生命周期方法显示从 api 中获取的数据。我设法获取数据（对象）并在状态（数组）中填充我的数据。但是我无法显示 return 部分中的值。

代码的第一部分似乎有效，为了便于阅读，我删除了 error/loading 部分：

class App extends Component {
    constructor(props) {
        super(props);
    
        this.state = {
          data: [], //putting data in the state
        };
      }
    
    async componentDidMount() {
        fetch("https://covid19.mathdro.id/api")
        .then((response) => response.json())
        .then(
            (data) => {
                this.setState({
                confirmed: data.confirmed, //populate data in this.state
                recovered: data.recovered,
                deaths: data.deaths,
            });
            }
          );
      }
    
    render() {
        const { confirmed, recovered, deaths } = this.state;
        console.log(confirmed, recovered, deaths);
        ...
    }
    
    export default App;

这是我试过的第一个 return :

return ( <div> {(confirmed, recovered, deaths)} </div>);

我得到了

Error: Objects are not valid as a React child (found: object with keys {value, detail}). If you meant to render a collection of children, use an array instead.

Console.log 确实 return 个对象 :

Object { value: 42280709, detail: "https://covid19.mathdro.id/api/confirmed" } Object { value: 28591681, detail: "https://covid19.mathdro.id/api/recovered" } Object { value: 1145557, detail: "https://covid19.mathdro.id/api/deaths" }

顺便说一下，console.log(confirmed.value) 没有 return 任何东西，为什么？

所以我决定使用 Array.prototype.map() :

return (
    <div> 
        {this.state.confirmed.map(i => (<div>{i.value}</div>))} 
    </div>);

现在我得到了

TypeError: confirmed is undefined

我不明白这个错误，console.log(confirmed) return 未定义的东西怎么办？

我探索的其他路径：使用 JSON.parse，将键放入地图，删除 {}，..

我回答了几个 Whosebug 问题，但仍然不明白要更改什么：

有什么线索吗？谢谢！

Answer 1

首先，你不能在 JSX 中渲染对象，它应该是一个有效的 JSX 元素，查看 ReactNode 类型定义以获取更多信息。

您面临的第二个问题是由于您的初始状态，它是一个带有名为 data 的空数组的对象； this.state = { data: [] };。因此，当您尝试访问 this.state.data 的 confirmed 属性时；它失败了，因为您的数据还没有从 api 调用中获得。

您需要做的是在渲染之前检查 this.state.data 是否有一个名为 confirmed

的属性

 return (<div>
          {this.state.confirmed && <div> 
            {this.state.confirmed.map(i => (<div>{i.value}</div>))} 
         </div>}
        </div>)

Answer 2

我检查了您一直在使用的 API，我发现 confirmed, recovered, deaths 是对象而不是数组 (That's why you're getting those error)。你应该执行以下代码。

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { confirmed: {}, recovered: {}, deaths: {} };
      }
    
    async componentDidMount() {
      fetch("https://covid19.mathdro.id/api")
      .then((response) => response.json())
      .then(
          (data) => {
            const { confirmed, recovered, deaths } = data
            this.setState({ confirmed, recovered, deaths });
          }
        );
      }
    
    render() {
        const { confirmed, recovered, deaths } = this.state;
        return (
          <div>
            <div>Confirmed: { confirmed.value || 0}</div>
            <div>Recovered: { recovered.value || 0}</div>
            <div>Deaths: { deaths.value || 0 }</div>
          </div>
        )
    }
}
    
export default App;

Displaying fetched data issue : objects not valid as React child / TypeError : undefined

Displaying fetched data issue : objects not valid as React child / TypeError : undefined

reactjs

javascript-objects

typeerror

array.prototype.map

react-lifecycle