我正在使用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;
我究竟做错了什么?
您的数据homes是一个数组,因此必须使用Array.prototype.map()遍历该数组才能起作用。
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> );