显示获取的数据问题：对象无效，作为React子对象/ TypeError：未定义

如何解决显示获取的数据问题：对象无效，作为React子对象/ TypeError：未定义

我想通过使用生命周期方法显示从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,deaths);
        ...
    }
    
    export default App;

这是我尝试的第一个回报：

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

我知道了

错误：对象作为React子对象无效（找到：带有键的对象 {value，detail}）。如果您打算渲染儿童集合，请使用 而是一个数组。

Console.log确实返回了对象：

对象{值：42280709，详细信息： “ https://covid19.mathdro.id/api/confirmed”}对象{值：28591681， 详细信息：“ https://covid19.mathdro.id/api/recovered”}对象{值： 1145557，详细信息：“ 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：确认未定义

我不明白此错误，如果console.log(confirmed)未定义，怎么能返回？

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

我遇到了几个stackoverflow问题，但仍然不知道要更改什么： React render: Objects are not valid as a React child Objects are not valid as a React child. If you meant to render a collection of children,use an array instead

有任何线索吗？谢谢！

解决方法

首先，您不能在JSX内部呈现对象，它应该是有效的JSX元素，请查看ReactNode类型定义以获取更多信息。

您面临的第二个问题是由于您的初始状态，该状态是一个带有空数组renderField的对象； const objectScan = require('object-scan'); const update = (needle,value,input) => objectScan([needle],{ abort: true,rtn: 'bool',filterFn: ({ parent,property }) => { parent[property] = value; } })(input); const obj = { a: { b: { c: [{ d: 1 }] } } }; console.log(update('**.d',2,obj)); // true iff replacement was made // => true console.log(JSON.stringify(obj)); // => {"a":{"b":{"c":[{"d":2}]}}} 。因此，当您尝试访问data的{​​{1}}属性时；失败，因为您的数据尚未通过api调用传递。

您需要做的是呈现任何内容以检查this.state = { data: [] };是否具有名为confirmed的属性

this.state.data

,

我检查了您一直在使用的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,deaths } = data
            this.setState({ confirmed,deaths });
          }
        );
      }
    
    render() {
        const { confirmed,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;