React中如何让createOrder函数等待map()执行完成？

你遇到的问题核心是React的useState更新是异步的，而且代码里还有两处逻辑问题：

• 误用map循环多次调用setFinal：map的作用是生成新数组，不是用来执行循环副作用的，多次调用setState会导致组件反复重渲染，还会因为异步更新让final的结果不符合预期。
• 调用setFinal后立刻用final传参：此时final还是更新前的旧值，自然会出现空数组的情况。

解决方案分两种场景： #

场景一：不需要保留final状态（仅用于传参给createOrder）

如果final只是为了给createOrder传值，完全没必要存成state，直接转换数组后调用函数即可：

const process = () => {
  // 用map正确转换数组
  const processedData = rowsData.map(item => ({
    width: item.width.width,
    height: item.height.height,
    quantity: item.quantity.quantity,
  }));
  // 直接传转换后的数组给createOrder
  createOrder(processedData);
};

场景二：需要保留final状态（页面其他地方要用到）

如果必须把转换后的数组存在final状态里，不能在setFinal后立刻调用createOrder，得用useEffect监听final的变化，等它更新完成后再执行：

import { useState, useEffect } from 'react';

// ... 其他原有代码保持不变

const [final, setFinal] = useState([]);

const process = () => {
  // 一次性转换好数组，再批量更新state
  const processedData = rowsData.map(item => ({
    width: item.width.width,
    height: item.height.height,
    quantity: item.quantity.quantity,
  }));
  setFinal(processedData);
};

// 监听final的变化，更新完成后调用createOrder
useEffect(() => {
  // 避免初始空数组触发调用
  if (final.length > 0) {
    createOrder(final);
  }
}, [final]);

另外建议修正createOrder的写法：因为setState是异步的，直接解构order可能拿到旧值，改用函数式更新更稳妥：

const createOrder = (value) => {
  setOrder(prevOrder => ({ ...prevOrder, item: value }));
};

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