Estoy configurando una aplicación React con un backend de Rails. Recibo el error "Los objetos no son válidos como un elemento secundario de React (encontrado: objeto con claves {id, nombre, información, created_at, updated_at}). Si pretendía representar una colección de elementos secundarios, use una matriz en su lugar".
Así es como se ven mis datos:
[ { "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" } ]Mi código es el siguiente:
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;¿Qué estoy haciendo mal?
Sus homes de datos son una matriz, por lo que tendría que iterar sobre la matriz usando Array.prototype.map() para que funcione.
return ( <div className="col"> <h1>Mi Casa</h1> <p>This is my house y'all!</p> {homes.map(home => <div>{home.name}</div>)} </div> );