为何在map中调用setState仅生效一次，messagesList仅存最后一项？

问题原因 #

你代码里每次调用setMessagesList时，都是基于当前渲染周期的messagesList初始值拼接新数组——React的状态更新是异步批量处理的，两次更新用的都是同一个原始messagesList，相当于两次都在原始数组后加两组数据，最后一次的结果覆盖了前一次，所以最终只保留了最后一组。

两种解决方法 #

方法一：先转换数组再一次性更新（推荐）

先把steps转换成目标消息格式的数组，再一次性更新状态，避免多次触发状态更新：

// 将steps转换为需要的消息结构
const newMessages = steps.flatMap(step => [
  {
    dataType: "text",
    item: {
      id: uuidv4(),
      type: "sender",
      message: "Question",
    },
  },
  {
    dataType: "text",
    item: {
      id: uuidv4(),
      type: "reciever",
      message: step.schema.answer,
    },
  },
]);

// 一次性合并到现有状态
setMessagesList(prev => [...prev, ...newMessages]);

方法二：使用函数式状态更新

如果一定要遍历更新，改用函数式更新，每次基于前一次的状态值计算新状态，React会按顺序处理这些更新：

// 用forEach替代map（语义更准确，因为不需要返回新数组）
steps.forEach(step => {
  setMessagesList(prev => [
    ...prev,
    {
      dataType: "text",
      item: {
        id: uuidv4(),
        type: "sender",
        message: "Question",
      },
    },
    {
      dataType: "text",
      item: {
        id: uuidv4(),
        type: "reciever",
        message: step.schema.answer,
      },
    },
  ]);
});

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