Estoy ejecutando una función que descarga los datos del servidor y los ejecuta después de un intervalo con la ayuda de setInterval . El problema es que no puedo cambiar el estado del componente dentro de setInterval (dentro de la función que he definido). Necesito que se cambie este estado porque Child componente secundario necesita volver a procesar algunas cosas cada vez que se realizan descargas.

Aquí está el código similar (solo para fines de demostración) que demuestra el problema al que me enfrento.

 import React, { useState, useEffect, useRef, useReducer } from 'react'; import './App.css'; import Child from './Child'; const App = () => { const [reset, setReset] = useState(false); const changeState = () => { console.log('changing state from', reset); setReset(!reset); console.log('changing state to', reset); }; const init = () => { setInterval(changeState, 1000); }; return ( <> <button onClick={init}>Start</button> <button onClick={changeState}>Change</button> <Child reset={reset} /> </> ); }; export default App;

1. Cuando hace clic en el botón Change , el estado del botón cambia perfectamente.
2. pero si hace clic en el botón de start (haga clic en él una vez), comenzará a llamar a setReset para cambiar el estado, pero no tiene ningún impacto. Así es como se ve la salida en este caso.

Componente hijo

 import React, { useState, useEffect, useRef, useReducer } from 'react'; const Child = (props) => { return ( <> {props.reset ? "hello" : "tello"} </> ); }; export default Child;

Puede editar el código aquí https://stackblitz.com/edit/react-aj5wdf?devtoolsheight=33&file=src/App.js

Nota: tengo experiencia de nivel principiante con React.

Gracias.