Tengo un enlace useEffect que no se actualiza después de cambiar la dependencia. La dependencia es una variable de estado que se pasa a través de props. A continuación se incluye el aspecto del código:
const MyComponent = ({resource}) => { // runs after changing resource state console.log(resource) useEffect(() => { setLoading(true); // doesnt run after changing resource state console.log(resource) setVariable(setDefaultValue()); }, [resource]); }MyComponent se representa para uno de los dos estados 'opción1' u 'opción2', el componente se representa de manera diferente según el estado. Llamo al componente así:
const [resource, setResource] = useState('option1'); const handleChange = (e) => { setResource(e.target.value); }; return ( <MyComponent resource={resource} /> ) No entiendo por qué useEffect no se ejecuta después de cambiar el estado del recurso. El archivo console.log en el exterior de useEffect muestra el estado de cambio, pero el archivo console.log dentro de useeffect no se ejecuta después de cambiar de estado.
Oh, puedes cambiar el código del siguiente intento anterior:
//Parent Component const [resource, setResource] = useState('option1'); const [variable,setVariable] = useState(); const [loading,setLoading] = useState(false); useEffech(()=>{ let fetch_api = true; setLoading(true); fetch(URL,options).then(res=>res.json()) .then(res=>{ if(fetch_api){ setVariable(setDefaultValue()); setLoading(false); } }); return ()=>{ //remove memory fetch_api = false; } },[resource]); const handleChange = (e) => { setResource(e.target.value); }; return ( <MyComponent variable={variable} /> ) //Child Component const MyComponent=({variable})=>{ return <> </> }