Estoy tomando una serie de publicaciones del backend y mapa a través de esa matriz para mostrar las publicaciones. Pero cuando elimino cualquier elemento y lo configuro nuevamente en useState, solo muestra todos los elementos excepto el último. Pero cuando actualizo la página, muestra la matriz real que se debe representar sin actualizar la página.
function Feed() { const [posts, setPosts] = React.useState(null); const [error, setError] = React.useState(false); const [isLoading, setIsLoading] = React.useState(true); const [refresh, setRefresh] = React.useState(false); const {user} = isAuthenticated(); const loadPosts = () => { setIsLoading(true); getPosts() .then(data => { if(data.error) setError(error) else { console.log(data); setPosts(data); setIsLoading(false); } }) .catch(err => console.log(err)) } React.useEffect(() => { loadPosts(); console.log(posts); //here it logs actual posts array with the right element removed but it doesn't render the same array }, [refresh]); React.useEffect(() => { loadPosts(); }, []); return ( <div> <Header /> <div className="container"> <div className="row"> <div className="col-8 mx-auto"> <div><Link to={`/user/${user._id}/post/create`}><button className="btn btn-purple rounded-3 col-12 p-3 mx-auto mt-4 mb-5 fw-bold" type="submit"><i class="fas fa-plus"></i><strong> New Post</strong></button></Link></div> {posts && (posts.map((post, index) => { return <Post postId={post._id} key={index} setRefresh={setRefresh} refresh={refresh} /> }))} </div> </div> </div> <Footer /> </div> ); } export default Feed;La matriz se está actualizando, cuando se elimina un elemento pero en la representación, solo elimina el último elemento, no elimina uno.
[1]: https://i.stack.imgur.com/6x9eS.png [Antes de eliminar 1 elemento][1]
[1]: https://i.stack.imgur.com/zPUnb.png [después de eliminar el primer elemento, elimina el último solo en el renderizado. En matriz, eliminó el primero.][1]
Esta es la razón por la que no usa índices de matriz para claves de elementos si la matriz puede cambiar alguna vez . :-) El propósito de la clave es decirle a React qué elementos puede reutilizar. Si usa el índice 1 (por ejemplo) como clave para el elemento A, pero luego elimina un elemento en el índice 0 o 1 , la próxima vez que use el índice 1 como clave, estará en un elemento diferente (elemento B) . En su lugar, use la Id de la publicación (supongo que es exclusiva de la publicación):
return <Post postId={post._id} key={post._id} setRefresh={setRefresh} refresh={refresh} />