在react.js应用程序中遇到一些axios错误
请告诉我为什么我会从这个应用程序中得到这个错误：
index.js：
const API='http://my-domain.com/api/?format=json'
class App extends React.Component{
constructor(props){
super(props);
this.state={
data: [],
isLoading: false,
error: null,
};
}
componentDidMount(){
this.setState({isLoading: true});
axios.get(API)
.then(response => this.setState({data: response.data, isLoading: false}))
.catch(response => this.setState({error: response.error, isLoading: false}));
}
render(){
return (
<div>
<p>{this.state.error}</p>
<p>{this.state.isLoading ? 'Loading...':'Loaded'}</p>
<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>
</div>
)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
这是这个应用程序应该得到的json：
[{"id":5,"name":"Storey-1","Value":1399511075,"NSt":5},
{"id":6,"name":"Storey-2","Value":1344981250,"NSt":5},
{"id":7,"name":"Storey-3","Value":1363157800,"NSt":5}]这就是我得到的错误：
对象作为React子级无效(已找到:具有键{id，name，Value，NSt}的对象)。如果您打算呈现一个子级集合，请改用数组。在li (在index.js:29)中，在ul (在index.js:29)中，在div (在index.js:26)中，在App (在index.js:36)
中
回答 4
Stack Overflow用户
发布于 2018-07-18 05:01:54
对象作为React子级无效(已找到:具有键{id，name，Value，NSt}的对象)。如果您打算呈现一个子级集合，请改用数组。在li (在index.js:29)中，在ul (在index.js:29)中，在div (在index.js:26)中，在应用程序(在index.js:36)中
这不是axios错误。尝试将原始对象作为React子组件放置时引发的React错误。
错误在这一行中：
<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>不要使用整个obj对象，必须使用如下的object字段：
<ul>{this.state.data.map(obj => <li key={obj.id}>{obj.name}</li>)}</ul>Stack Overflow用户
发布于 2018-07-18 05:02:39
您正在通过一个对象数组进行映射，您试图在其中呈现对象本身：
<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>。
我假设您希望呈现{obj.name}或{obj.Value}
Stack Overflow用户
发布于 2018-07-18 05:01:12
我认为错误信息非常清楚。你正试图在对象上渲染，而React不喜欢这样：
<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>作为下一步，您可能想要字符串，然后挑选出您想要呈现的属性。然后，您可以看到响应数据是什么，并决定如何呈现。
<ul>{this.state.data.map(obj => <li key={obj.id}>{JSON.stringify(obj)}</li>)}</ul>https://stackoverflow.com/questions/51390061
复制相似问题
腾讯云开发者
