javascript – useState set方法不会立即反映更改

我正在尝试学习钩子,useState方法让我感到困惑.我正在以数组的形式为状态分配初始值.即使使用spread(…)或没有spread运算符,useState中的set方法也不适用于我.
我在另一台PC上制作了一个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数组中.

解决方法:

与通过扩展React.Component或React.PureComponent创建的类组件中的setState非常相似,使用useState钩子提供的更新程序的状态更新也是异步的,并且不会立即反映和更新,但会触发重新呈现

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

如果要对状态更新执行操作,则需要使用useEffect钩子,就像在类组件中使用componentDidUpdate一样,因为useState返回的setter没有回调模式

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

就更新状态的语法而言,setMovies(result)将使用异步请求中可用的值替换状态中的先前电影值

但是,如果要将响应与先前存在的值合并,则必须使用状态更新的回调语法以及正确使用扩展语法,如

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

标签：javascript,reactjs,react-hooks
来源： https://codeday.me/bug/20190527/1161502.html