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）都不起作用。

我希望结果变量被推送到movies数组中。

Answer 1

我知道已经有很好的答案了。但我想给出另一个解决同样问题的方法，并使用我的模块react useStateRef访问最新的“电影”状态。

正如您所理解的，通过使用React状态，您可以在每次状态更改时呈现页面。但是通过使用React ref，您总是可以获得最新的值。

因此，模块react-useStateRef允许您同时使用state's和ref's。它向下兼容React.useState，因此您可以替换导入语句

const { useEffect } = React
import { useState } from 'react-usestateref'

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {

        const result = [
          {
            id: "1546514491119",
          },
        ];
        console.log("result =", result);
        setMovies(result);
        console.log("movies =", movies.current); // will give you the latest results
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

• 反应使用sateref

Answer 2

_{上一个答案的附加细节：}

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

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

>

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

将变量添加到依赖项中（并使用react hooks/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)
  }, [])

如果异步是唯一的原因，则可以等待setState（）。

但是，假定道具和状态在1次渲染期间不变。

将此.state视为是不可变的。

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

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

2个渲染之间的值可能不同，但在渲染本身和任何闭包中保持不变（即使在渲染完成后，函数的寿命也会更长，例如，事件处理程序，任何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>

Answer 3

很像通过扩展React创建的Class组件中的setState。组件或React。PureComponent，使用useState钩子提供的更新器的状态更新也是异步的，不会立即反映。

此外，这里的主要问题不仅仅是异步性质，而是函数根据其当前闭包使用状态值，并且状态更新将反映在下一次重新呈现中，其中现有闭包不受影响，而是创建新闭包。现在，在当前状态下，钩子中的值由现有闭包获得，当重新呈现时，闭包将根据是否重新创建函数进行更新。

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

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

如果你想在状态更新上执行一个操作，你需要使用use效应钩子，就像在类组件中使用组件diUpdate一样，因为useState返回的setter没有回调模式

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

就更新状态的语法而言，setMovies（result）将用异步请求中可用的值替换状态中以前的movies值。

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

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