Recibo algunas publicaciones del servidor y cada vez que elimino o agrego una publicación, necesito actualizar la página para que muestre los cambios. Esto se puede resolver agregando publicaciones en la matriz de dependencias, pero luego se produce un procesamiento infinito.
useEffect(() => { const getUsersData = async () => { const results = await getUsers(); setUsers(results.data); console.log(results.data); }; const getPostData = async () => { const results = await getPosts(); console.log(results.data); setPosts( results.data.sort((p1, p2) => { return new Date(p2.created_at) - new Date(p1.created_at); }) ); }; getUsersData(); getPostData(); }, [posts]); {post.user_id === user.result.user_id && ( <DeleteIcon color="secondary" onClick={() => handleDelete(post.post_id, { user_id: user.result.user_id }) } /> )}__
export const deletePost = async (postId, userId) => { await axios.delete(`${URL}/posts/${postId}`, { data: userId }); };useEffect(() => { const getPostData = async () => { ... setPosts( ... ); }; getPostData(); }, [posts]);Ups ! El problema está aquí, estás configurando tu publicación cada vez que... ¡estás configurando tus publicaciones! ¿Quizás deberías usar setpost en otro lugar de tu código? :)
Si desea actualizar sus publicaciones, debe hacerlo en otro efecto de uso, con las dependencias que necesite saber que necesita para actualizar su publicación. O haz una actualización temporizada, también en un efecto de uso. A continuación, puede llamar a setpost, sin tener acceso a la publicación. No necesita publicar como dependencia para actualizarlo, por el contrario, eso es lo que está causando un bucle aquí :)
No puede agregar posts como una dependencia a su useEffect ya que está usando ese efecto para llamar a setPosts . Esto provocará un bucle de renderizado infinito.
Su problema es una de las razones por las que se han creado muchas bibliotecas de búsqueda para reaccionar en los últimos años, como react-query o RTK query , porque lo que quiere hacer es actualizar los datos consultados, en respuesta a una mutación en el mismo conjunto de datos en el servidor (mutaciones: POST, DELETE, PATCH, PUT) . Estas bibliotecas le permiten especificar qué datos de consulta revalidar una vez que realiza una mutación; en su caso, le diría a su consulta getPosts que se vuelva a ejecutar y revalidar en caché cada vez que realice una mutación addPost o deletePost .
Si desea implementar manualmente tanto la actualización optimista como la revalidación de caché, debe agregar más código, básicamente tendrá estos bloques de código:
const [posts, setPosts] = useState([]) const getUsersData = async () => { const results = await getUsers(); setUsers(results.data); console.log(results.data); }; const getPostsData = async () => { const results = await getPosts(); console.log(results.data); setPosts(results.data.sort((p1, p2) => { return new Date(p2.created_at) - new Date(p1.created_at); }) ); }; const handleDelete = async (postId, userId) => { await deletePost(postId, userId) // DELETE Call const idx = posts.findIndex(p => p.id === postId ) setPosts(posts => [...posts.slice(0, idx),...posts.slice(idx+1, posts.length)] // Optimistic update of UI getPosts() // Revalidate posts after the delete operation } const handleAddPost = async (post, userId) => { await addPost(post, userId) // POST Call setPosts(posts => [post,...posts] // Optimistic update of UI getPosts() // Revalidate posts after the POST operation } // Retrieve data on the first component mount useEffect(() => { getUsersData(); getPostData(); }, []);