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 的回调，我们可以使用 useEffect 来改变状态。

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

Answer 2

这就是 useEffect 钩子的用途，因为 setState 钩子没有像 setState 在类组件中那样的回调。

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

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

useState 不会立即更新

2 个答案: