Tengo una declaración de estado en mi aplicación que contiene una array de información y se puede actualizar mediante un formulario anidado dentro de un subcomponente.

Estoy usando la sintaxis de devolución de llamada de useState para actualizar los datos, pero por alguna razón, a pesar de que se ejecuta la devolución de llamada y el cambio de estado, no se actualizará.

Esto se puede confirmar al verificar un cambio de estado en useEffect ; no generará ningún cambio con un console.log . Sin embargo, dentro de la devolución de llamada, el console.log funcionará cada vez (por lo que claramente la devolución de llamada se está ejecutando).

Este es un diseño simplificado de lo que estoy haciendo:

 const MainContext = createContext(); const Parent = () => { const [data, setData] = useState([]); const updateData = (index, field, value) => { // This just updates (or initialises) an object at the specified index. setData(previousState => { let candidates = previousState; let candidate = candidates[index]; if(typeof candidate !== "object"){ candidate = {}; } candidate[field] = value; candidates[index] = candidate; // This will run every time, and return the correct result: // [{ // example: value // }] console.log(candidates); return candidates; }); }; useEffect(() => { console.log(data); // This will not run whenever the field is updated. }, [data]); return ( <MainContext.Provider value={{ dispatch: { updateData } }}> <Child /> </MainContext.Provider> ); }; // Whenever a user enters data inside this components input, it should push a change // via the dispatch.updateData method and update the array in the parent component. const Child = () => { const testIndex = 1; return ( <MainContext.Consumer>{({ dispatch }) => ( <input name="example" placeholder="Example Field" onChange={evt => dispatch.updateData( testIndex, evt.target.name, evt.target.value )} /> )}</MainContext.Consumer> ); };

Entonces, ¿qué está pasando aquí? Parece que el estado se está configurando correctamente, e incluso si updateData en un useCallback con los deps configurados en el gancho de estado, seguirá sin poder consolarse en el useEffect .