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

Question

我正在尝试学习钩子，而 useState 方法让我感到困惑。我正在以数组的形式为状态分配初始值。 useState 中的 set 方法对我不起作用，无论有没有扩展语法。

我在另一台 PC 上创建了一个 API，我正在调用它并获取我想要设置为状态的数据。

这是我的代码：

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

<script type="text/babel" defer>
// import React, { useState, useEffect } from "react";
// import ReactDOM from "react-dom";
const { useState, useEffect } = React; // web-browser variant

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 =", result);
        setMovies(result);
        console.log("movies =", movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

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

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

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

setMovies(result) 和 setMovies(...result) 都不起作用。

我希望将 result 变量推送到 movies 数组中。

原文由 Pranjal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

就像扩展 React.Component 或 React.PureComponent 创建的 类组件中的 .setState() 一样，使用 useState 钩子提供的更新器更新状态也是异步的，不会立即反映。

此外，这里的主要问题不仅仅是异步性质，而是函数基于当前闭包使用状态值这一事实，并且状态更新将反映在下一次重新渲染中，现有闭包不受影响，而是新的那些被创建。现在在当前状态下，钩子中的值是由现有的闭包获得的，当重新渲染发生时，闭包会根据函数是否再次重新创建而更新。

即使您在函数中添加了 setTimeout ，尽管超时将在重新渲染发生的一段时间后运行，但 setTimeout 仍将使用其先前关闭的值，而不是更新的值。

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

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

上一个答案 的其他详细信息：

虽然 React 的 setState 是 异步的（类和钩子），并且很容易用这个事实来解释观察到的行为，但这并不是它发生的 _原因_。

TLDR：原因是围绕不可变 const 值的 闭包 范围。

---

解决方案：

• 读取渲染函数中的值（不在嵌套函数中）：

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

• 将变量添加到依赖项中（并使用 react-hooks/exhaustive-deps eslint 规则）：

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

• 使用临时变量：

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

• 使用可变引用（如果我们不需要状态并且只想记住值 - 更新引用不会触发重新渲染）：

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

---

解释为什么会这样：

如果异步是唯一的原因，则有可能 await setState() 。

但是， props 和 state 都 假定在 1 render 期间不变。

对待 this.state 就好像它是不可变的一样。

使用钩子，通过使用带有 const 关键字的 常量值 来增强此假设：

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

2 次渲染之间的值可能不同，但在渲染本身和任何 闭包 内保持不变（即使在渲染完成后，函数仍然存在更长时间，例如 useEffect ，事件处理程序，在任何 Promise 或 setTimeout 内） .

考虑以下伪造但 同步 的、类似 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>

原文由 Aprillion 发布，翻译遵循 CC BY-SA 4.0 许可协议