时间戳

首页 > 解决方案 > useState 没有立即更新

javascript - useState 没有立即更新

问题描述

这是我的代码的一个片段。当我调用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()

}

标签： javascriptreactjsreact-hooks

解决方案

这是因为 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();
    }
  );
}

在 hooks 中由于 hooks 中没有 setter 的回调，我们可以useEffect在状态改变时使用。

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

推荐阅读