React钩子陈旧状态

Question

我试图在回调中调用setState异步，问题是，当我的函数调用setState时，该状态已通过发生的另一个事件进行更新。有没有办法从嵌套回调查询当前状态？

这是一个简单的演示，展示了我遇到的内容：

https://stackblitz.com/edit/reeact-uybyyn

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
function App() {
  const [state, setState] = useState({value: 0});
  const click = async () => {
    setTimeout(() => setState({value: state.value + 10}), 300);
    async function apiCall(state) {
      // fake it for now
      return new Promise((res) => {
        setTimeout(() => {
          // !!!Get the latest state here!!!
          res({value: state.value + 1});
        }, 1000)
      });
    }
    const newState = await apiCall(state);
    setState(newState);
  }
  return (
    <div>
      Value: {state.value}
      <button onClick={click}>Update</button>
    </div>
  );
}
render(<App />, document.getElementById('root'));

Answer 1

useState具有功能更新器表单。您可以在更新之前使用它来获取最新的状态值。

const [val ,setVal] = React.useState(initVal);
const obj = { str: 'Hello' };
// Merge state form —
seVal(obj);
// Function updater form —
seVal(prevState => {
  // Object.assign would also work
  return {...prevState, ...{ str: prevState.str + ' World' }};
});

所以您的示例将成为

setTimeout(() => setState(prevState => ({value: prevState.value + 10})), 300);

参考文档 - hooks-reference.html＃功能上限

我还更新了您的代码框以使其与注释一起使用。codesandbox