我正在使用React.js创建应用程序。我使用API获取一些数据,并试图在列表中显示数据。目前,当我尝试遍历数据时,我收到以下错误。
对象无效作为React子对象(找到:具有键{USDUSD,USDEUR,USDCAD,USDAUD}的对象)。如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象。检查`Exchange
的渲染方法
即使我将数据存储在数组中,也会出现此错误。
我检查过有一个类似的线程与此错误相关:Objects are not valid as a React child,但这些答案对我的情况没有帮助。
这是我的代码。
import React from 'react';
import axios from 'axios';
const baseUrl = 'http://apilayer.net/api/historical?'
const API_KEY = 'API_KEY'
const date = '2017-10-22';
const currencies = 'USD,EUR,CAD,AUD';
const format = 1;
export default class Exchange extends React.Component {
constructor(props) {
super(props);
this.state = {
item : []
};
}
componentDidMount(){
const url = `${baseUrl}${API_KEY}&date=${date}¤cies=${currencies}&format=${format}`
axios.get(url)
.then(({data}) => {
this.state.item.push(data.quotes);
this.setState({
item: this.state.item
});
})
.catch((err) => {})
console.log("item" + this.state.item)
}
render() {
const rate = this.state.item.map((element, index)=>{
console.log("element" + element)
return <div key={index}>
<p>{element}</p>
</div>
});
return (
<div>
<div>Exchange</div>
<ul>Today's rate
<li>{ rate }</li>
</ul>
</div>
)
}
}
答案 0 :(得分:2)
由于每个quote
都是一个对象,您可以使用 Object.keys() 循环浏览.map()
中的对象以显示每个值。
const baseUrl = 'http://apilayer.net/api/historical?'
const API_KEY = 'API_KEY'
const date = '2017-10-22';
const currencies = 'USD,EUR,CAD,AUD';
const format = 1;
const quotes = {
USDUSD: 1,
USDEUR: 0.850499,
USDCAD: 1.26377,
USDAUD: 1.280799
};
class Exchange extends React.Component {
constructor(props) {
super(props);
this.state = {
item: []
};
}
componentDidMount() {
//const url = `${baseUrl}${API_KEY}&date=${date}¤cies=${currencies}&format=${format}`
//axios.get(url)
//.then(({data}) => {
this.setState({
item: this.state.item.concat([quotes])
});
//})
//.catch((err) => {})
//console.log("item" + this.state.item)
}
render() {
const rate = this.state.item.map((quotes, index) => {
return Object.keys(quotes).map(key => {
return (
<div key = {key} >
<p>{quotes[key]}</p>
</div>
)
})
});
return (
<div>
<div>Exchange</div>
<ul>
Today 's rate
<li> {rate} </li>
</ul>
< /div>
)
}
}
ReactDOM.render( < Exchange / > , document.getElementById('root'));
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
&#13;