Estoy trabajando en la aplicación de reacción. Todo funciona bien, pero cuando llego al punto final del host local, obtengo una matriz de mi documento almacenado en mongodb, así que quiero usar el mapa para crear un bucle y para eso también tengo que pasar la clave a cada niño, pero cómo realizar esto. todo, estoy enfrentando un problema de desestructuración, quiero decir que no puedo hacer,
mi función para golpear localhost está debajo
import React, { useEffect } from "react"; // import PostContext from '../context/posts/postContext' import Footer from "./Footer"; import Post from "./Post"; import Sidebar from "./Sidebar"; const Posts = () => { const getAllPost = async () => { const response = await fetch("http://localhost:5000/allposts", { method: "GET", }); const data = await response.json(); console.log(data); }; useEffect(() => { getAllPost(); }, []); return ( <> <main className="main"> <div className="container"> <h4 className="heading">Posts</h4> <Post key={} /> </div> <div className="sidebar"> <h4 className="heading">Sidebar</h4> <Sidebar /> </div> </main> <footer> <Footer /> </footer> </> ); }; export default Posts;También quiero escribir el título para obtener el título, no este.ese.título. Por favor, dame una solución para manejar esto.
primero, cree un estado para almacenar datos const [posts,setPosts]=useState([]) . luego escriba este código en la función getAllPost() , setPosts(data) para almacenar los datos que recibe de la API en el estado. Ahora ve al código html, debajo de las etiquetas <>h4</> y escribe esto {posts.map((post,index)=><Post key={index} post={post}>)} . Luego puede acceder a post desde los accesorios del componente <Post/> . Editar: supongo que su respuesta de API ya es una matriz