React异步更新状态后无法取最新值，用状态作信号是否可行？

问题背景 #

在React项目中，启动多个异步函数修改useState定义的myState，但所有Promise执行完成后调用saveMyState时，无法获取更新后的myState。

原问题代码 #

const [myState, setMyState] = useState<myType[]>({...});

const pendingPromises: Promise<void>[] = [];

async function asyncFunction(a: myType){
  return fs.promises.copyFile(a.currentPath, a.destination).then(() => {
    setMyState((myState) => [...myState.filter((b) => (b.id != a.id)), {...a, curentPath: a.destination}]
  });
}

function saveMyState(){
  // 实际是保存到JSON文件
  console.log(myState) // 这里显示的是asyncFunction修改前的原始状态
}

function mainFunction(){
  myArray.forEach((a) => pendingPromises.push(asyncFunction(a)));

  Promise.all(pendingPromises).then(saveMyState);
}

自行尝试的解决方案 #

新增callFunction状态，需要调用saveMyState时将其设为true，通过useEffect监听该状态触发保存：

const [myState, setMyState] = useState<myType[]>({...});

const [callFunction, setCallFunction] = useState<boolean>(false);

const pendingPromises: Promise<void>[] = [];

useEffect(() => {
  if (callFunction) {
    saveMyState();
    setCallFunction(false);
  }
}, [callFunction]);

async function asyncFunction(a: myType){
  return fs.promises.copyFile(a.currentPath, a.destination).then(() => {
    setMyState((myState) => [...myState.filter((b) => (b.id != a.id)), {...a, curentPath: a.destination}]
  });
}

function saveMyState(){
  // 实际是保存到JSON文件
  console.log(myState) // 现在能拿到更新后的状态了
}

function mainFunction(){
  myState.forEach((a) => pendingPromises.push(asyncFunction(a)));

  Promise.all(pendingPromises).then(() => setCallFunction(true)); // 触发保存
}

疑问 #

这个方案能运行但不够优雅，请问这种方式是否可行？若不可行，该如何优化？

回答 #

你的方案是否可行？ #

可行，但确实存在冗余。核心是利用useEffect监听状态变化，确保saveMyState能获取到最新的myState——组件重新渲染后，useEffect依赖的callFunction变化时，myState已经是更新后的版本。不过额外维护一个callFunction状态没必要，有更简洁的优化方式。

优化方案 #

方案1：直接计算最终状态，一次性更新并保存

既然所有异步操作都是修改myState，可以在所有Promise完成后，基于原始myState计算出最终状态，再一次性更新并保存，避免多次触发组件渲染：

const [myState, setMyState] = useState<myType[]>({...});

async function asyncFunction(a: myType){
  await fs.promises.copyFile(a.currentPath, a.destination);
  return {...a, currentPath: a.destination}; // 返回修改后的对象
}

function saveMyState(finalState: myType[]){
  // 保存到JSON文件
  console.log(finalState);
}

async function mainFunction(){
  // 执行所有异步操作，收集修改后的对象
  const updatedItems = await Promise.all(
    myArray.map(async (a) => await asyncFunction(a))
  );

  // 基于原始myState生成最终状态
  const finalState = myState.map(item => {
    const updated = updatedItems.find(u => u.id === item.id);
    return updated || item;
  });

  // 一次性更新state并保存
  setMyState(finalState);
  saveMyState(finalState);
}

方案2：用useRef追踪最新状态

如果必须保留多次setMyState的逻辑，可以用useRef实时同步最新的myState，绕过React闭包捕获旧值的问题：

const [myState, setMyState] = useState<myType[]>({...});
const myStateRef = useRef<myType[]>(myState);

// 同步state到ref
useEffect(() => {
  myStateRef.current = myState;
}, [myState]);

const pendingPromises: Promise<void>[] = [];

async function asyncFunction(a: myType){
  await fs.promises.copyFile(a.currentPath, a.destination);
  setMyState(prev => [...prev.filter(b => b.id !== a.id), {...a, currentPath: a.destination}]);
}

function saveMyState(){
  // 直接取ref里的最新状态
  console.log(myStateRef.current);
  // 保存到JSON文件
}

function mainFunction(){
  myArray.forEach(a => pendingPromises.push(asyncFunction(a)));
  Promise.all(pendingPromises).then(saveMyState);
}

方案3：用useReducer管理复杂状态更新

如果状态更新逻辑更复杂，推荐用useReducer统一处理状态变更，把状态管理和副作用逻辑解耦：

type State = myType[];
type Action = 
  | { type: 'UPDATE_ITEM', payload: myType }
  | { type: 'SAVE_STATE' };

function reducer(state: State, action: Action): State {
  switch(action.type) {
    case 'UPDATE_ITEM':
      return [...state.filter(b => b.id !== action.payload.id), action.payload];
    case 'SAVE_STATE':
      saveMyState(state);
      return state;
    default:
      return state;
  }
}

const [myState, dispatch] = useReducer(reducer, initialState);

async function asyncFunction(a: myType){
  await fs.promises.copyFile(a.currentPath, a.destination);
  dispatch({ type: 'UPDATE_ITEM', payload: {...a, currentPath: a.destination} });
}

function saveMyState(state: State){
  console.log(state);
  // 保存到JSON文件
}

async function mainFunction(){
  await Promise.all(myArray.map(a => asyncFunction(a)));
  dispatch({ type: 'SAVE_STATE' });
}

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