javascript - 如何在孙子组件中设置或更新数组的状态

Question

我正在尝试从位于父组件中的孙子组件设置数组的状态。

我尝试使用 setNumberOfVar([...varsLines]); 这个方法，但它不会立即更新状态。它更新但退一步。

我的代码

  const removeVar = (e, val) => {
    e.preventDefault();
    var varsLines = numberOfVar;
    varsLines = numberOfVar.filter((item) => {
      return item.postion != val;
    });
    varsLines = varsLines.map((item) => {
      return {
        ...item,
        postion: item.postion > val ? item.postion - 1 : item.postion,
      };
    });
    console.log(varsLines);
    setNumberOfVar([...varsLines]); // <== this line is not updating the state immediately;
    console.log(numberOfVar);
  };

Answer 1

setNumberOfVar() 是一个异步操作，不会立即更新状态。

如果您想在状态更新时获得回调之类的东西，您可以使用在状态更新时运行的 useEffect Hook 。

import {useEffect } from 'react';

  useEffect(() => {
    console.log(numberOfVar);
  },[numberOfVar]);