0
254
ViewsMi barra superior se duplica desde que agregué axios e importé la imagen del usuario con axios y reaccioné
Me gustaría saber por qué mi "barra superior" está duplicada cuando solo quiero una. Y es que hice mi importación de la imagen del usuario a través de axios y agregué el .map en el retorno. Realmente no entiendo por qué si alguien pudiera ayudarme sería bueno. Gracias por adelantado 
import "./topbar.css" import { Search } from '@mui/icons-material' import { useState, useEffect, Fragment } from 'react' import axios from "axios" function Home() { const [user, setPosts] = useState([]) useEffect(() => { console.log("chargement ok") const fetchData = async () => { const result = await axios.get( 'http://localhost:4200/api/user/') setPosts(result.data) } fetchData(); }, []) return ( <Fragment> { user ? user.map((users,topbar) => ( <div key={topbar} className="topBarContainer"> <div className="topBarLeft"> <span className="logo">Groupomania</span> </div> <div className="topBarCenter"> <div className="searchBar"> <Search className="searchIcon" /> <input placeholder="Vous cherchez quelque chose ?" className="searchInput" /> </div> </div> <div className="topBarRight"> <div className="topBarLinks"> <span className="topBarLink">Page d'acceuil</span> <span className="topBarLink">Deconnexion</span> </div> <img src={users.picture} alt="Photo de profil de l'utilisateur" className="topBarImg" /> </div> </div>)) : (<p></p>) } </Fragment> ) } export default Home3 answers
Answer question0
Como el mapa representa la topbar para cada usuario, obtiene tantas topbars como usuarios. La función de map debe estar dentro del div del contenedor de la barra superior.
<div key={key} className="topBarContainer"> { user.map(...) } </div>0
Esto se debe a que está haciendo la barra superior dentro del ciclo, por lo que obtiene una barra superior por usuario.
0
No estoy seguro de por qué, pero puede ser debido a su llave. Algunos patrones para arreglar primero:
-
const [user, setPosts] = useState([])->const [posts, setPosts] = useState([]) - no tienes que usar la palabra Fragmento: -> <>
- Normalmente en un
.maplos parámetros se usan asíposts.map((post, index) => ...) -
posts ? post.map(...) : null
Editar: por supuesto, debe eliminar su barra superior de su .map(...)
Ahora intente con una key mejor que "topbard" que es el índice en la matriz ... intente post.id que debería ser uniq
Editar solución:
import "./topbar.css"; import { Search } from "@mui/icons-material"; import { useState, useEffect, Fragment } from "react"; import axios from "axios"; function Home() { const [user, setUser] = useState(); useEffect(() => { console.log("chargement ok"); const fetchData = async () => { const result = await axios.get("http://localhost:4200/api/user/"); setUser(result.data); }; fetchData(); }, []); return ( <div className="topBarContainer"> <div className="topBarLeft"> <span className="logo">Groupomania</span> </div> <div className="topBarCenter"> <div className="searchBar"> <Search className="searchIcon" /> <input placeholder="Vous cherchez quelque chose ?" className="searchInput" /> </div> </div> <div className="topBarRight"> <div className="topBarLinks"> <span className="topBarLink">Page d'acceuil</span> <span className="topBarLink">Deconnexion</span> </div> {user && <img src={user.picture} alt="Photo de profil de l'utilisateur" className="topBarImg" />} </div> </div> ); } export default Home;