React中如何让函数等待状态更新完成后再执行？

问题核心 #

你的代码里存在两个关键问题：

• React的setvalue是异步操作，组件首次渲染时，getMathvalue里的setvalue(a)不会立刻更新value，直接在组件顶层调用getresult({ value })只能拿到初始的undefined。
• 你添加的监听value的useEffect会在初始渲染（此时value为undefined）和value更新后各触发一次，所以会先打印一次undefined，之后才会输出更新后的有效值。

可行解决方案 #

要让getresult仅在value被正确赋值后执行，只需在监听value的useEffect中增加判断，过滤掉value未定义的场景：

function quickmath() {
  const [value, setvalue] = useState();

  function getMathvalue() {
    var a = 1;
    a++;
    setvalue(a);
  }

  useEffect(() => {
    getMathvalue();
  }, []);

  useEffect(() => {
    // 仅当value有有效值时执行getresult
    if (value !== undefined) {
      getresult({ value });
    }
  }, [value]);

  function getresult(x) {
    console.log('here', x);
  }
}

额外优化方案 #

如果value的初始状态可以提前确定，也可以直接给useState设置初始值，从根源避免初始undefined的情况：

// 给value设置初始值0，后续会更新为2
const [value, setvalue] = useState(0);

此时即使不添加判断，useEffect第一次执行时会拿到初始值0，value更新为2时会再次触发getresult，也能满足需求。

内容的提问来源于stack exchange，提问作者Jerémie paul