Estoy tratando de representar una lista de publicaciones mediante el mapeo a través de una matriz. He hecho esto muchas veces antes, pero por alguna razón
renderPosts = async () => { try { let res = await axios.get('/posts'); let posts = res.data; return posts.map((post, i) => { return ( <li key={i} className="list-group-item">{post.text}</li> ); }); } catch (err) { console.log(err); } } render () { return ( <div> <ul className="list-group list-group-flush"> {this.renderPosts()} </ul> </div> ); }Todo lo que obtengo es:
Error no detectado: los objetos no son válidos como hijos de React (encontrado: [promesa de objeto]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
Revisé los datos devueltos por renderPosts y es una matriz con los valores correctos y sin promesas. ¿Que está pasando aqui?
También recibí el mismo mensaje de error al crear un componente funcional asíncrono. Los componentes funcionales no deben ser asíncronos.
const HelloApp = async (props) => { //<<== removing async here fixed the issue return ( <div> <h2>Hello World</h2> </div> ) } ReactDOM.render(<HelloApp />, document.querySelector("#app"))this.renderPosts() devolverá una Promise , no los datos reales, y AFAIK Reactjs no resolverá las Promesas implícitamente en el render .
Tienes que hacerlo así
componentDidMount() { this.renderPosts(); } renderPosts = async() => { try { const res = await axios.get('/posts'); const posts = res.data; // this will re render the view with new data this.setState({ Posts: posts }); } catch (err) { console.log(err); } } render() { const posts = this.state.Posts?.map((post, i) => ( <li key={i} className="list-group-item">{post.text}</li> )); return ( <div> <ul className="list-group list-group-flush"> {posts} </ul> </div> ); }Uso de ganchos de reacción:
ACTUALIZACIÓN 2020-08-01: Modificado con la sugerencia de @ajrussellaudio.
import React, {useState, useEffect} from "react" const ShowPosts = () => { const [posts, setPosts] = useState([]); useEffect( () => { async function fetchData() { try { const res = await axios.get('/posts'); setPosts(res.data); } catch (err) { console.log(err); } } fetchData(); }, []); return <div>{posts}</div> }