Soy novato en React y tengo un problema con map . Mi componente de reacción
const NewsComponent = () => { const params = useParams() const pk = params.pk const [news, setNews] = useState([]) useEffect(() =>{ const getNews = async() => { await httpClient.get(`/feed/${pk}`) .then((response) => { setNews(response.data); }) } getNews(); }, []) return( <div> {news.results.map((post, index) =>( <div> <h1>{post}</h1> </div> ))} </div> ) }Mi respuesta de backend:
{ "count": 1, "next": null, "previous": null, "results": [ { "title": "asdasd", "text": "asdasdasd", "likes": [], "dislikes": [], "attachments": [] } ] }Pero no funciona.
estado de news como valor inicial como matriz y debe usarlo como un objeto.
const [news, setNews] = useState({}) Además, en el html debe verificar si los results no están definidos.
{news.results?.map((post, index) =>( <div> <h1>{post}</h1> </div> ))}Hay varios problemas con tu código.
¡La primera es la respuesta de la API!
Es un objeto, no una matriz, pero dejó el valor inicial del estado como una matriz vacía.
const [news, setNews] = useState({});Lo segundo es que no hay datos en el renderizado inicial, entonces no hay resultado en el estado de noticia, por eso te da error. Para resolver esto, puede usar el encadenamiento opcional .
{news.results?.map((post, index) =>( <div> <h1>{post}</h1> </div> ))}