El método setState set no refleja el cambio inmediatamente

Estoy tratando de aprender ganchos y el useStatemétodo me ha confundido. Estoy asignando un valor inicial a un estado en forma de matriz. El método set en useStateno me funciona incluso con spread(...)o without spread operator. He hecho una API en otra PC a la que estoy llamando y obteniendo los datos que quiero establecer en el estado.

Aquí está mi código:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    {
      category: "",
      photo: "",
      description: "",
      id: 0,
      name: "",
      rating: 0
    }
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {
        //const response = await fetch(
        //`http://192.168.1.164:5000/movies/display`
        //);
        //const json = await response.json();
        //const result = json.data.result;
        const result = [
          {
            category: "cat1",
            description: "desc1",
            id: "1546514491119",
            name: "randomname2",
            photo: null,
            rating: "3"
          },
          {
            category: "cat2",
            description: "desc1",
            id: "1546837819818",
            name: "randomname1",
            rating: "5"
          }
        ];
        console.log(result);
        setMovies(result);
        console.log(movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return <p>hello</p>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);

El setMovies(result)bien como setMovies(...result)no funciona. Podría usar algo de ayuda aquí.

Espero que la variable de resultado se inserte en la matriz de películas.

Al igual que los componentes de setState in Class creados al extender React.Componento React.PureComponent, la actualización de estado utilizando el actualizador proporcionado por useStatehook también es asíncrona y no reflejará de inmediato

Además, el problema principal aquí no es solo la naturaleza asincrónica sino el hecho de que los valores de estado son utilizados por las funciones en función de sus cierres actuales y las actualizaciones de estado se reflejarán en la próxima representación por la cual los cierres existentes no se ven afectados sino que se crean otros nuevos . Ahora, en el estado actual, los valores dentro de los ganchos se obtienen por los cierres existentes y cuando ocurre una nueva representación, los cierres se actualizan en función de si la función se vuelve a crear o no.

Incluso si agrega una setTimeoutfunción, aunque el tiempo de espera se ejecutará después de un tiempo durante el cual la re-renderización habría sucedido, pero setTimout todavía usará el valor de su cierre anterior y no el actualizado.

setMovies(result);
console.log(movies) // movies here will not be updated

Si desea realizar una acción en la actualización de estado, debe usar el enlace useEffect, al igual que componentDidUpdateen componentes de clase, ya que el setter devuelto por useState no tiene un patrón de devolución de llamada

useEffect(() => {
    // action on update of movies
}, [movies]);

En lo que respecta a la sintaxis para actualizar el estado, setMovies(result)reemplazará el moviesvalor anterior en el estado con los disponibles en la solicitud asíncrona

Sin embargo, si desea fusionar la respuesta con los valores existentes anteriormente, debe usar la sintaxis de devolución de llamada de actualización de estado junto con el uso correcto de la sintaxis extendida como

setMovies(prevMovies => ([...prevMovies, ...result]));

_{Detalles adicionales a la respuesta anterior :}

Si bien React's setState es asíncrono (tanto clases como ganchos), y es tentador usar ese hecho para explicar el comportamiento observado, no es la razón por la que sucede.

TLDR: La razón es un alcance de cierre alrededor de un constvalor inmutable .

Soluciones:

• lea el valor en la función de representación (no dentro de las funciones anidadas):

  useEffect(() => { setMovies(result) }, [])
  console.log(movies)

• agregue la variable en dependencias (y use la regla react-hooks / exhaustive-deps eslint):

  useEffect(() => { setMovies(result) }, [])
  useEffect(() => { console.log(movies) }, [movies])

• use una referencia mutable (cuando lo anterior no es posible):

  const moviesRef = useRef(initialValue)
  useEffect(() => {
    moviesRef.current = result
    console.log(moviesRef.current)
  }, [])

Explicación por qué sucede:

Si async fuera la única razón, sería posible await setState().

Howerver, ambos propsy statese supone que no cambian durante 1 render .

Trátelo this.statecomo si fuera inmutable.

Con ganchos, esta suposición se mejora mediante el uso de valores constantes con la constpalabra clave:

const [state, setState] = useState('initial')

El valor puede ser diferente entre 2 renders, pero permanece constante dentro del render en sí y dentro de cualquier cierre (funciones que duran más, incluso después de que finaliza el render, por ejemplo useEffect, controladores de eventos, dentro de cualquier Promise o setTimeout).

Considere seguir una implementación falsa, pero sincrónica , similar a React:

// sync implementation:

let internalState
let renderAgain

const setState = (updateFn) => {
  internalState = updateFn(internalState)
  renderAgain()
}

const useState = (defaultState) => {
  if (!internalState) {
    internalState = defaultState
  }
  return [internalState, setState]
}

const render = (component, node) => {
  const {html, handleClick} = component()
  node.innerHTML = html
  renderAgain = () => render(component, node)
  return handleClick
}

// test:

const MyComponent = () => {
  const [x, setX] = useState(1)
  console.log('in render:', x) // ✅
  
  const handleClick = () => {
    setX(current => current + 1)
    console.log('in handler/effect/Promise/setTimeout:', x) // ❌ NOT updated
  }
  
  return {
    html: `<button>${x}</button>`,
    handleClick
  }
}

const triggerClick = render(MyComponent, document.getElementById('root'))
triggerClick()
triggerClick()
triggerClick()

<div id="root"></div>

Acabo de terminar una reescritura con useReducer, siguiendo el artículo de @kentcdobs (referencia a continuación) que realmente me dio un resultado sólido que no sufre ni un poco de estos problemas de cierre.

ver: https://kentcdodds.com/blog/how-to-use-react-context-effectively

Condensé su repetitivo legible a mi nivel preferido de SECADO: leer su implementación de sandbox le mostrará cómo funciona realmente.

Disfruta, sé que lo estoy !!

import React from 'react'

// ref: https://kentcdodds.com/blog/how-to-use-react-context-effectively

const ApplicationDispatch = React.createContext()
const ApplicationContext = React.createContext()

function stateReducer(state, action) {
  if (state.hasOwnProperty(action.type)) {
    return { ...state, [action.type]: state[action.type] = action.newValue };
  }
  throw new Error(`Unhandled action type: ${action.type}`);
}

const initialState = {
  keyCode: '',
  testCode: '',
  testMode: false,
  phoneNumber: '',
  resultCode: null,
  mobileInfo: '',
  configName: '',
  appConfig: {},
};

function DispatchProvider({ children }) {
  const [state, dispatch] = React.useReducer(stateReducer, initialState);
  return (
    <ApplicationDispatch.Provider value={dispatch}>
      <ApplicationContext.Provider value={state}>
        {children}
      </ApplicationContext.Provider>
    </ApplicationDispatch.Provider>
  )
}

function useDispatchable(stateName) {
  const context = React.useContext(ApplicationContext);
  const dispatch = React.useContext(ApplicationDispatch);
  return [context[stateName], newValue => dispatch({ type: stateName, newValue })];
}

function useKeyCode() { return useDispatchable('keyCode'); }
function useTestCode() { return useDispatchable('testCode'); }
function useTestMode() { return useDispatchable('testMode'); }
function usePhoneNumber() { return useDispatchable('phoneNumber'); }
function useResultCode() { return useDispatchable('resultCode'); }
function useMobileInfo() { return useDispatchable('mobileInfo'); }
function useConfigName() { return useDispatchable('configName'); }
function useAppConfig() { return useDispatchable('appConfig'); }

export {
  DispatchProvider,
  useKeyCode,
  useTestCode,
  useTestMode,
  usePhoneNumber,
  useResultCode,
  useMobileInfo,
  useConfigName,
  useAppConfig,
}

con un uso similar a este:

import { useHistory } from "react-router-dom";

// https://react-bootstrap.github.io/components/alerts
import { Container, Row } from 'react-bootstrap';

import { useAppConfig, useKeyCode, usePhoneNumber } from '../../ApplicationDispatchProvider';

import { ControlSet } from '../../components/control-set';
import { keypadClass } from '../../utils/style-utils';
import { MaskedEntry } from '../../components/masked-entry';
import { Messaging } from '../../components/messaging';
import { SimpleKeypad, HandleKeyPress, ALT_ID } from '../../components/simple-keypad';

export const AltIdPage = () => {
  const history = useHistory();
  const [keyCode, setKeyCode] = useKeyCode();
  const [phoneNumber, setPhoneNumber] = usePhoneNumber();
  const [appConfig, setAppConfig] = useAppConfig();

  const keyPressed = btn => {
    const maxLen = appConfig.phoneNumberEntry.entryLen;
    const newValue = HandleKeyPress(btn, phoneNumber).slice(0, maxLen);
    setPhoneNumber(newValue);
  }

  const doSubmit = () => {
    history.push('s');
  }

  const disableBtns = phoneNumber.length < appConfig.phoneNumberEntry.entryLen;

  return (
    <Container fluid className="text-center">
      <Row>
        <Messaging {...{ msgColors: appConfig.pageColors, msgLines: appConfig.entryMsgs.altIdMsgs }} />
      </Row>
      <Row>
        <MaskedEntry {...{ ...appConfig.phoneNumberEntry, entryColors: appConfig.pageColors, entryLine: phoneNumber }} />
      </Row>
      <Row>
        <SimpleKeypad {...{ keyboardName: ALT_ID, themeName: appConfig.keyTheme, keyPressed, styleClass: keypadClass }} />
      </Row>
      <Row>
        <ControlSet {...{ btnColors: appConfig.buttonColors, disabled: disableBtns, btns: [{ text: 'Submit', click: doSubmit }] }} />
      </Row>
    </Container>
  );
};

AltIdPage.propTypes = {};

Ahora todo persiste sin problemas en todas partes en todas mis páginas

¡Agradable!

Gracias Kent!

// replace
return <p>hello</p>;
// with
return <p>{JSON.stringify(movies)}</p>;

Ahora debería ver, que su código en realidad hace el trabajo. Lo que no funciona es el console.log(movies). Esto se debe a que moviesapunta al estado anterior . Si mueve su console.log(movies)exterior useEffect, justo encima del retorno, verá el objeto de películas actualizado.