Reactjs 错误：对象作为子对象无效如果要呈现子对象集合，请改用数组

我犯了这个错误 错误：对象作为React子对象无效（找到：具有键{exRates}的对象）。如果要呈现子对象集合，请改用数组。 这是我的代码

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            exRates: []
        };
    }
    getCurrencyRatesFromDB = () => {
        fetch('https://api.exchangeratesapi.io/latest')
           .then((response) => {
             console.log('then 1', response);
            return response.json();                                                                     
        }).then((data) => {
            console.log('then 2', data);
            this.setState({
                exRates: data.rates
            });
        });
    }

    render() {
        console.log('render started');
        return (
            <div>
                console.log('return started')
                {this.state.exRates.map(rate => {
                   return <div>{rate.toString()}</div>
                 })}
                <button 
                    type="button" 
                    className="btn"
                    onClick={() => {
                        this.getCurrencyRatesFromDB();                                          
                    }}
                    >
                        Load rates
                </button>
                <p>{this.state}</p>
        </div>        
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
汇率：[]
};
}
getCurrencyRatesFromDB=（）=>{
取（'https://api.exchangeratesapi.io/latest')
。然后（（响应）=>{
console.log（'然后是1'，响应）；
返回response.json（）；
})。然后（（数据）=>{
console.log（'然后是2'，数据）；
这是我的国家({
exRates:data.rates
});
});
}
render（）{
log（'render start'）；
返回(
console.log（'返回已启动'）
{this.state.exRates.map（速率=>{
返回{rate.toString（）}
})}
{
this.getCurrencyRatesFromDB（）；
}}
>
负荷率
{this.state}

)
}
}
ReactDOM.render（，document.getElementById（'root'））；

---

我需要做什么来处理它？非常感谢。

引发此错误的对象是

this。在组件末尾附近的
p
标记中呈现该错误的状态

如的顶部答案中所述，唯一可接受的React子项是，例如字符串和数字。要呈现对象和数组之类的可变对象，您必须给出一些说明，说明如何以原语呈现它们，例如如何处理数组中的每个元素，或者在页面上放置对象中的哪些键

您有正确的想法，可以通过在组件的前面进行映射来渲染阵列：

{this.state.exRates.map(rate => {
    return <div>{rate.toString()}</div>
})}

{this.state.exRates.map(([currency, rate]) => <div>{`${currency}: ${rate}`}</div>)

这将为您提供类似以下内容的HTML：

<div>usd: 10</div>
<div>eur: 12</div>
<div>gbp: 15</div>

usd:10
欧元：12
英镑：15

根据需要调整资本化

如果
…（[currency，rate]）=>…
的一部分让你感到困惑，那就是，这是现代JavaScript的一个非常有用的功能。
你试图用这个来呈现什么：
{this.state}
。然后在按下“加载速率”按钮后，它给出了一个错误类型错误：this.state.exRates.map不是一个函数。如果我正确理解了你的帖子，我正确地通过exRates进行了映射，该部分不需要编辑。我将编辑我的答案，以包含更多细节，说明为什么React在没有进一步处理的情况下不会将对象作为子对象处理。至于你的第二个问题：
this.state.exRates
上的
.map
属性不是函数。由此我们可以假设
exRates
不是一个数组，运行API调用可以确认它是一个对象。尝试查看
Object.keys
函数，了解如何将对象转换为可以映射的数组。这很奇怪。Google说Object.key实际上返回给定对象的属性名数组。如果我要求您分享完整正确的代码并提供一些解释，这会不会太过分？抱歉，
Object.entries
可能是您在这里想要的，假设您在Internet Explorer中不需要它。(). 我将继续，并给你一个如何在这里使用它的例子。