对象作为React子对象无效.如果要渲染子级集合,请改用数组 [英] Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
本文介绍了对象作为React子对象无效.如果要渲染子级集合,请改用数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在设置一个带有Rails后端的React应用.我收到错误消息对象作为React子对象无效(找到:带有键{id,name,info,created_at,updated_at}的对象).如果要渲染子代的集合,请改用数组."
I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render a collection of children, use an array instead."
这是我的数据:
[
{
"id": 1,
"name": "Home Page",
"info": "This little bit of info is being loaded from a Rails
API.",
"created_at": "2018-09-18T16:39:22.184Z",
"updated_at": "2018-09-18T16:39:22.184Z"
}
]
我的代码如下:
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
homes: []
};
}
componentDidMount() {
fetch('http://localhost:3000/api/homes')
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
homes: result
});
},
// error handler
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, homes } = this.state;
if (error) {
return (
<div className="col">
Error: {error.message}
</div>
);
} else if (!isLoaded) {
return (
<div className="col">
Loading...
</div>
);
} else {
return (
<div className="col">
<h1>Mi Casa</h1>
<p>This is my house y'all!</p>
<p>Stuff: {homes}</p>
</div>
);
}
}
}
export default Home;
我在做什么错了?
推荐答案
Your data homes
is an array, so you would have to iterate over the array using Array.prototype.map() for it to work.
return (
<div className="col">
<h1>Mi Casa</h1>
<p>This is my house y'all!</p>
{homes.map(home => <div>{home.name}</div>)}
</div>
);
这篇关于对象作为React子对象无效.如果要渲染子级集合,请改用数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文