useState设置方法不能立即反映更改

如何解决useState设置方法不能立即反映更改

类似于通过扩展React.Component或创建的Class组件中的setState，React.PureComponent使用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)将状态中的先前movies值替换为异步请求中可用的值

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

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

解决方法

我正在尝试学习钩子，该useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。useState即使使用spread(...)或，in中的set方法对我也不起作用without spread operator。我在另一台PC上创建了一个API，该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",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数组中。