javascript - El método de configuración de useState no refleja el cambio inmediatamente

reactjs react-hooks

Question

Estoy tratando de aprender ganchos y el método useState me ha confundido. Estoy asignando valor inicial a un estado en forma de una matriz. El método de configuración en useState no funciona para mí, incluso con spread(...) o without spread operator . He creado una API en otra PC a la que llamo y obtengo los datos que deseo configurar 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) así como setMovies(...result) no funciona. Podría necesitar algo de ayuda aquí. Gracias por adelantado.

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

Answer 1

Al igual que los componentes de setState en clase creados al extender React.Component o React.PureComponent , la actualización de estado usando el actualizador proporcionado por useState hook también es asíncrono, y no se reflejará ni actualizará inmediatamente, pero activará una nueva representación.

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 gancho useEffect, al igual que el uso de componentDidUpdate en componentDidUpdate de clase, ya que el establecedor 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 valor de las movies anteriores en el estado con los disponibles en la solicitud asíncrona

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

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