Estaba tratando de renderizar múltiples accesorios en un solo componente, ambos son de diferentes apis que funcionan juntas y el problema es que quiero mapear los accesorios en un solo componente para mostrar una lista de publicaciones. alguien me dijo que hiciera esto creando una variable (matriz) en mi componente. Luego, distribuyendo las propiedades (accesorios) en la variable, por ejemplo, myVariable.push(...posts, ...externalPosts). Pero parece que no puedo entender cómo logro los resultados. El Componente representa otro componente secundario llamado al que quiero pasar los accesorios.
Aplicación.js
import React, { useState, useEffect } from "react"; import axios from "axios"; import { Posts } from './components'; const App = () => { const [ posts, setPosts ] = useState([]); const [ postsExternal, setPostsExternal ] = useState([]); const fetchPostsAll = () => { axios.get(`http://localhost:2000/posts`).then(({ data }) => { let externalPosts = []; setPosts(data); console.log(data); data.map(({ external_id }) => { axios .get(`http://localhost:2000/posts${external_id}`) .then(({ data }) => { console.log(data); externalPosts.push(data); }); setPostsExternal(externalPosts); }); }); } useEffect(() => { fetchPostsAll(); }, []); return ( <div> <Navbar/> <Posts posts={posts} postsExternal={postsExternal} /> </div> ); }; export default App;Publicaciones.js
import React from 'react'; import Post from './Post/Post'; const Posts = ({ posts, postsExternal }) => { return ( <main> <Container fluid> <Row className="p-2"> { posts.map((post) => ( <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}> <Post post={post} postExternal={postsExternal}/> </Col> ))} </Row> </Container> </main> ); }; export default Posts;Post.js
import React from 'react'; const Post = ({ post, postExternal }) => { return ( <Figure> <span>{post.title}</span> <span>{postExternal.rating}</span> </Figure> ) } export default Post;El problema es con el archivo Posts.js mientras mapeo, quiero mapear ambos accesorios y pasar esos accesorios de un solo elemento a Post.js
Simplemente no desestructuras los accesorios y los pasas como están.
import React from 'react'; import Post from './Post/Post'; const Posts = (props) => { const { posts } = props; return ( <main> <Container fluid> <Row className="p-2"> { posts.map((post) => ( <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}> <Post {...props} post={post}/> </Col> ))} </Row> </Container> </main> ); }; export default Posts;Y puedes hacer esto en tu App.js
import React, { useState, useEffect } from "react"; import axios from "axios"; import { Posts } from './components'; const App = () => { const [ posts, setPosts ] = useState([]); const [ postsExternal, setPostsExternal ] = useState([]); const fetchPostsAll = () => { axios.get(`http://localhost:2000/posts`).then(({ data }) => { let externalPosts = []; setPosts(data); console.log(data); data.map(({ external_id }) => { axios .get(`http://localhost:2000/posts${external_id}`) .then(({ data }) => { console.log(data); externalPosts.push(data); }); setPostsExternal(externalPosts); }); }); } useEffect(() => { fetchPostsAll(); }, []); const props = { posts, postsExternal }; return ( <div> <Navbar/> <Posts {...props} /> </div> ); }; export default App;Hacer:
import React from 'react'; import Post from './Post/Post'; const Posts = ({ posts, postsExternal }) => { return ( <main> <Container fluid> <Row className="p-2"> { posts.map((post, index) => ( <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}> <Post post={post} postExternal={postsExternal[index]}/> </Col> ))} </Row> </Container> </main> ); }; export default Posts;Editado:
import React from 'react'; import Post from './Post/Post'; const Posts = ({ posts, postsExternal }) => { return ( <main> <Container fluid> <Row className="p-2"> {posts.length !== 0 && postsExternal.length !== 0 && posts.map((post, index) => ( <Col className="p-lg-4 p-sm-3" key={post.id} xs={6} sm={4} md={3} lg={3} xl={2}> <Post post={post} postExternal={postsExternal[index]}/> </Col> ))} </Row> </Container> </main> ); }; export default Posts;Asegúrate de que tus datos estén cargados.
función fetchPostsAll :
const fetchPostsAll = () => { axios.get(`http://localhost:2000/posts`) .then(({ data }) => { console.log(data); const externalPosts = data.map(({ external_id }) => { return axios .get(`http://localhost:2000/posts${external_id}`) .then(({ data }) => { return data; }); }) Promise .all(externalPosts) .then(externalPosts => { setPosts(data); setExternalPosts(externalPosts); }); }) ; }