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

代码的第一部分似乎有效，为了便于阅读，我删除了错误/加载部分：

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 ( <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 确实返回了对象：

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) 没有返回任何东西，为什么？

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

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

现在我得到了

TypeError: confirmed is undefined

我不明白这个错误，如果 console.log(confirmed) 未定义，它怎么能返回某些内容？

我探索的其他路径：使用 JSON.parse 、将键放入映射中、删除 {}，..

我浏览了几个 stackoverflow 问题，但仍然不明白要更改什么： React 渲染：对象作为 React 子项无效 对象作为 React 子项无效。如果您想要渲染子项集合，请使用数组代替

有什么线索吗？谢谢！