显示获取的数据问题：对象作为 React 子项/类型错误无效：未定义

Posted 2023-02-22

【中文标题】显示获取的数据问题：对象作为 React 子项/类型错误无效：未定义

【英文标题】：Displaying fetched data issue : objects not valid as React child / TypeError : undefined

【发布时间】：2021-02-07 08:01:09

【问题描述】：

我想使用生命周期方法显示从 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>);

我收到了

错误：对象作为 React 子对象无效（找到：带键的对象 价值，细节）。如果您打算渲染一组孩子，请使用 而是一个数组。

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:confirmed is undefined

我不明白这个错误，如果console.log(confirmed)未定义，如何返回？

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

我经历了几个 *** 问题，但仍然不明白要更改什么： 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

有什么线索吗？谢谢！

【问题讨论】：

我已经回滚了您的编辑，并在您的问题中添加了答案。我很高兴您找到了解决问题的方法。但是，实际的答案/解决方案不应编辑到您的问题中。一般来说，您应该edit 问题来澄清问题，但不要在问题中包含答案。您应该使用用于解决问题的代码创建自己的答案，然后接受它（系统可能需要 48 小时延迟才能接受您自己的答案）。

【参考方案1】：

我检查了您一直在使用的 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;

【参考方案2】：

首先你不能在 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>)