Verás, en este momento estoy desarrollando un showMorePost que anteriormente había hecho con éxito, pero esta vez lo reformulé uniendo todos los estados que tenía en uno con varios argumentos
const [state, setState] = useState({ postsToShow: [], hover: false, count: 1 }); const loopThroughPosts = (count) => { for ( let i = count * postsPerPage - postsPerPage; i < postsPerPage * count; i++ ) { if (posts[i] !== undefined) { arrayForHoldingPosts.push(posts[i]); } } setState({ ...state, postsToShow: arrayForHoldingPosts }); }; // load the first set of posts when the page loads // and then set the value of count to 2 useEffect(() => { setState((prevState) => ({ ...prevState, count: prevState + 1 })); loopThroughPosts(state.count); }, []); const handleShowMorePosts = () => { setState((prevState) => ({ ...prevState, count: prevState + 1 })); loopThroughPosts(state.count); }; return ( <div> <Posts postsToRender={state.postsToShow} /> <button onClick={handleShowMorePosts} onMouseEnter={() => setState({ ...state, hover: true }) } onMouseLeave={() => setState({ ...state, hover: false }) } > Load more </button> </div> ); }; El problema es que ahora en lugar de traerme las publicaciones que siguen al llamar al handleShowMorePosts , genera un bucle infinito en el que, cada vez que llamo a la función, repite las primeras tres publicaciones.
Aquí está el código: https://codesandbox.io/s/sad-dust-pybbe?file=/src/App.js:193-2128
setState((prevState) => ({ ...prevState, count: prevState + 1 }));debiera ser
setState((prevState) => ({ ...prevState, count: prevState.count + 1 })); Como está escrito actualmente, está agregando prevState (un objeto) a 1 (un número entero), por lo que está viendo un comportamiento extraño.
Después de una mirada más cercana... también tiene una condición de carrera en la que está configurando el estado usando una devolución de llamada (la mencionada anteriormente) y luego, casi inmediatamente, configurando el estado nuevamente en la función loopThroughPosts . Esa segunda vez de establecer el estado es esencialmente mantener el valor de count en 1 , lo que se puede ver al registrar ese valor en la consola. Recomendaría dividir el estado como lo tenía originalmente para mantener sus actualizaciones para count y las publicaciones para postsToShow separadas entre sí. Si tiene una razón definida para tener el escenario junto, su componente requerirá una refactorización.