我正在设置一个带有 Rails 后端的 React 应用程序。我收到错误消息“对象作为 React 子项无效(找到:带有键 {id、name、info、created_at、updated_at} 的对象)。如果您打算渲染一组子项,请改用数组。”
这是我的数据的样子:
[ { "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;
我究竟做错了什么?
您的数据是一个数组,因此您必须使用Array.prototype.map()homes对数组进行迭代才能使其正常工作。
homes
return ( <div className="col"> <h1>Mi Casa</h1> <p>This is my house y'all!</p> {homes.map(home => <div>{home.name}</div>)} </div> );