Метод setState, не отражающий изменения немедленно - PullRequest
Новая
       54

Метод setState, не отражающий изменения немедленно

0 голосов
/ 07 января 2019

Я пытаюсь выучить хуки, а метод useState меня запутал. Я присваиваю начальное значение состоянию в виде массива. Метод set в useState у меня не работает даже с spread(...) или without spread operator. Я сделал API на другом компьютере, который я вызываю и извлекаю данные, которые я хочу установить в состояние.

Вот мой код: 

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);

setMovies(result), а также setMovies(...result) не работает. Могли бы использовать некоторую помощь здесь. Заранее спасибо.

Я ожидаю, что переменная результата будет помещена в массив movies.

1 Ответ

0 голосов
/ 07 января 2019

Так же, как setState в компонентах класса, созданных расширением React.Component или React.PureComponent, обновление состояния с использованием средства обновления, предоставляемого хуком useState, также асинхронно и не будет немедленно отражать и обновлять, но вызовет повторную визуализацию 

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

Если вы хотите выполнить действие по обновлению состояния, вам нужно использовать ловушку useEffect, очень похожую на использование componentDidUpdate в компонентах класса, так как установщик, возвращаемый useState, не имеет шаблона обратного вызова 

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

Что касается синтаксиса для обновления состояния, setMovies(result) заменит предыдущее значение movies в состоянии теми, которые доступны из асинхронного запроса

Однако, если вы хотите объединить ответ с ранее существовавшими значениями, вы должны использовать синтаксис обратного вызова для обновления состояния вместе с правильным использованием синтаксиса распространения, такого как 

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