延迟使用 React 状态

Question

我正在使用一个名为 react-easy-state 的库来管理我的状态，但我相信这个问题与这个库没有直接关系，而是一个一般性问题。

我的 App.js 中有这样的代码：

function App() {
  const [isChanged, setIsChanged] = React.useState(false);
  console.log(store.counter);
  React.useEffect(() => {
    setTimeout(() => {
      setIsChanged(true);
    }, store.counter);
  }, []);

  return (
    <div className="App">
      {isChanged && <h1>Hello CodeSandbox</h1>}
      <Change />
    </div>
  );
}

其中有一个 child <Changed /> 看起来像这样：

export default function Change() {
  React.useEffect(() => {
    store.rndNum = ~~(Math.random() * 6) + 11;
  }, []);

  store.counter = ~~Math.pow(1.555, store.rndNum) * 20;

child应该是生成一个随机数，然后修改这个随机数，存入我店里的另一个变量中。修改后的值应该会减慢由 setTimeout 切换和触发的 HTML 元素的出现。但是我的控制台显示正在生成的数字与我的代码不匹配，因为它出于某种原因生成 20 然后继续生成正确的数字。同时，我想等到我商店中的值更新，然后运行 setTimeout。而目前 setTimeout 将 0 或 20 作为计时器并立即执行代码。

重现代码：https://codesandbox.io/s/hopeful-cdn-vg7kh

Answer 1

因为这个操作，你先得到20。

store.counter = ~~Math.pow(1.555, store.rndNum) * 20;

为什么？因为当时的store.rndNum还是""（store上声明为""）而这部分

~~Math.pow(1.555, store.rndNum)

永远是 1。

Hooks是异步的，所以useEffect不会先改变rndNum的值。

编辑我的评论：

 React.useEffect(() => {
    if (!isNaN(store.rndNum)) {
      store.counter = ~~Math.pow(1.555, store.rndNum) * 20;
    }
  }, [store.rndNum]);

延迟使用 React 状态

Using React states with delay

javascript

reactjs

react-easy-state