tengo esta función en useEffect que obtiene publicaciones de la base de datos y luego establece el estado de las posts y luego las envía al componente Posts , pongo el estado de las posts en la dependencia useEffect , por lo que si el usuario crea una nueva publicación, el componente Posts vuelve a renderizar ¡el usuario no necesita actualizar la página y funcionó bien! pero me di cuenta en la pestaña de la red, las solicitudes a http://localhost:8000/home/${user._id} se envían infinitamente, no sé por qué sucede eso
const [posts, setPosts] = useState([]); const { user, isLoading, error } = useContext(AuthContext); useEffect(() => { const getPosts = async () => { const response = id ? await fetch(`http://localhost:8000/${id}`) : await fetch(`http://localhost:8000/home/${user._id}`); const data = await response.json(); setPosts( data.sort((p1, p2) => { return new Date(p2.createdAt) - new Date(p1.createdAt); }) ); }; getPosts(); }, [user, id, user?._id, posts]); return ( <div> {posts.map((post) => ( <Posts key={post._id} post={post} /> ))} </div> );En las dependencias de su llamada useEffect , ha incluido posts . Esto es innecesario (las posts no se usan dentro del efecto) y la causa de sus problemas. Según los documentos , cada vez que cambia una de sus dependencias, se activa el efecto. Dado que getPosts modifica las posts llamando a setPosts , tiene un ciclo infinito. La solución es eliminar las posts de las dependencias de efectos.
De sus comentarios, parece que también tiene una segunda pregunta, que es, "¿cómo puedo activar una operación de recuperación cuando un servicio externo ( http://localhost:8000/ ) tiene una actualización lista para mí?" Hay una variedad de respuestas a esta pregunta, pero la más simple es sondear el servicio externo en un temporizador. Algo en el sentido de lo siguiente debería hacer:
useEffect(() => { ... // fire getPosts once per second const timer = setInterval(getPosts, 1000); // clean up the timer whenever the effect is re-fired or the // component unmounts return () => clearInterval(timer); }, [dependencies...]);El paso de limpieza es crítico. Sin él, terminará con varios temporizadores ejecutándose en diferentes intervalos, y los temporizadores no se detendrán si se desmonta el componente. Consulteefectos con limpieza en los documentos para obtener más detalles.
Esta no es la forma en que generalmente manejamos esto. Prueba esto en su lugar:
const [posts, setPosts] = useState([]);useEffect con una matriz vacía como dependencia. De esta manera puedes evitar enviar solicitudes infinitas. useEffect(() => { const getPosts = async () => { const response = id ? await fetch(`http://localhost:8000/${id}`) : await fetch(`http://localhost:8000/home/${user._id}`); const data = await response.json(); setPosts( data.sort((p1, p2) => { return new Date(p2.createdAt) - new Date(p1.createdAt); }) ); }; getPosts(); }, []);Se actualiza infinitamente porque las posts de estado están en sus dependencias de useEffect, por lo que cuando solicita la API, el estado se actualiza y luego, cuando se actualiza el estado, useEffect observe eso y llame a getPosts() una y otra vez
La forma en que maneja esto es eliminando las posts de las dependencias si desea actualizar la página cuando se crea la nueva publicación. Puede agregar otro estado como [isUpdated, setIsUpdated] y ponerlo en las dependencias en lugar de posts
y puede setIsUpdated(true) antes de solicitar la API POST y setIsUpdated(false) después
como esto
function createNewPost() { setIsUpdated(true) ... <requesting POST API function> ... setIsUpdated(false) }