Estoy tratando de ejecutar una función que usa el estado de reacción, pero cuando el estado cambia, la función no se actualiza con el valor del estado.
const {useState, useEffect} = React; function Example() { const [count, setCount] = useState(0); const testFunction = function(){ setInterval(() => { console.log(count) }, 3000) } useEffect(() => { let fncs = [testFunction]; fncs.forEach(fnc => fnc.apply(this)); }, []) // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.getElementById('other-div').innerHTML = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ReactDOM.render( <Example />, document.getElementById('root') );Ejemplo: https://jsfiddle.net/bzyxqkwt/4/
solo para que entiendas, estoy pasando funciones a otro componente y él ejecuta esas funciones en algún evento como este
fncs.forEach(fnc => fnc.apply(this, someEventParams));Supongo que setInterval es solo para fines de demostración y debe detenerse/eliminarse, pero básicamente useEffect captura el estado inicial. Entonces, si desea capturar el estado actualizado de la función interna, debe pasar todos los valores que necesita (en este caso, parámetro de conteo). Algo como:
const testFunction = function(){ // setInterval(() => { console.log(count); // it should log the updated value // }, 3000) } useEffect(() => { let fncs = [testFunction]; fncs.forEach(fnc => fnc.apply(this)); }, [count]); // <-- this makes the trick