如何等待useState的多个setXXX执行完成后再调用函数？

React中setState（包括函数式组件的setXxx状态更新函数）是异步批量执行的，所以你在调用setData1和setData2后立刻执行initialize，此时组件还没完成状态更新，自然拿不到新值。以下是几种可行的解决方法：

方法一：通过useEffect监听状态变化 #

用额外的useEffect监听data1和data2的变化，当两者都完成更新后触发initialize：

import { useEffect, useState } from 'react';

const [data1, setData1] = useState('');
const [data2, setData2] = useState('');

useEffect(() => {
  setData1("test"); 
  setData2("test2");
}, []);

useEffect(() => {
  // 确保两个状态都已被设置为目标值（可根据业务场景调整判断条件）
  if (data1 === "test" && data2 === "test2") {
    initialize();
  }
}, [data1, data2]); // 依赖数组包含要监听的状态

const initialize = () =>{
  console.log(data1); // 输出"test"
  console.log(data2); // 输出"test2"
}

这种方式适合initialize需要依赖组件状态后续变化的场景，每次data1或data2更新时都会触发检查，满足条件就执行初始化逻辑。

方法二：直接传递新值给初始化函数 #

既然你已经明确要设置的新值，直接把值作为参数传给initialize，不需要等待状态更新：

import { useEffect, useState } from 'react';

const [data1, setData1] = useState('');
const [data2, setData2] = useState('');

useEffect(() => {
  const newData1 = "test";
  const newData2 = "test2";
  setData1(newData1); 
  setData2(newData2);
  initialize(newData1, newData2);
}, []);

const initialize = (val1, val2) =>{
  console.log(val1); // 输出"test"
  console.log(val2); // 输出"test2"
}

这种方式更直接高效，避免了依赖异步状态更新的问题，适合只需要使用本次设置值的场景。

方法三：使用useRef保存最新值 #

如果需要在多个地方都能同步拿到最新状态值，可以用useRef来存储：

import { useEffect, useState, useRef } from 'react';

const [data1, setData1] = useState('');
const [data2, setData2] = useState('');
const data1Ref = useRef('');
const data2Ref = useRef('');

useEffect(() => {
  const newData1 = "test";
  const newData2 = "test2";
  // 同步更新ref的值
  data1Ref.current = newData1;
  data2Ref.current = newData2;
  // 更新组件状态
  setData1(newData1); 
  setData2(newData2);
  initialize();
}, []);

const initialize = () =>{
  console.log(data1Ref.current); // 输出"test"
  console.log(data2Ref.current); // 输出"test2"
}

useRef的current属性是同步更新的，所以可以直接在initialize中获取到最新值，同时也完成了组件状态的更新。

内容的提问来源于stack exchange，提问作者whitebear