USState不立即更新

Question

下面是我的代码的一个片段。调用filteredData（）时，状态未更新。在状态更新之前，我必须单击按钮两次。这是一个旧项目，我正在使用钩子更新它。我以前在设置状态后使用了回调函数，但我不能用钩子实现。

function change(event) {
  let name = event.target.name;
  let value =
  event.target.type === "checkbox"
    ? event.target.checked
    : event.target.value;

setState((prevState) => ({ ...prevState, [name]: value }));
filteredData()

}

Answer 1

这是因为setState是一个异步函数，如果您需要在设置状态后立即执行任何任务，则应在回调中执行。

类内组件

function change(event) {
  let name = event.target.name;
  let value =
  event.target.type === "checkbox"
    ? event.target.checked
    : event.target.value;

 this.setState(
    (prevState) => {
      return {
        ...prevState,
        [name]: value
      };
    },
    () => {
      filteredData();
    }
  );
}

在钩子中，由于钩子中没有setter的回调，我们可以在状态更改时使用use效应。

useEffect(() => filteredData(), [state])

Answer 2

这就是use效应钩子的作用，因为setState钩子不像setState在类组件中那样具有回调。

useEffect(() => filteredData(), [state])

每次状态更改时，useEffect中的函数都将运行。正如saksh73所说，setState是异步的，但是它不返回promise，因此您不能对其调用then，也不能调用waitit。您必须使用useEffect对状态更改做出反应，如图所示。