React中使用map函数向State批量添加组件时仅成功添加1个组件的问题

我来帮你拆解下这个问题：点击Multiple Component按钮只添加一个组件，核心原因是React的useState更新是异步的，而且循环中直接使用当前component状态会因为闭包捕获旧值，导致多次更新都基于同一个初始状态，最终只有最后一次更新生效。

具体来说，你在MultipleComponent里用newArray.map循环调用setComponent，但每次调用时，component都是函数执行瞬间的旧值（也就是点击按钮时的数组状态）。三次setComponent([...component, XXX])其实都是在同一个旧数组基础上添加元素，最后就只会留下最后一次添加的组件。另外，await在这里完全没用，因为setComponent本身并不返回Promise，等待它没有意义。

给你两种修复方案，都能解决问题：

方案一：使用useState的函数式更新 #

这种方式让每次更新都基于最新的状态，而不是闭包捕获的旧值：

function MultipleComponent() {
  newArray.forEach(x => {
    if (x === 1) {
      setComponent(prev => [...prev, Test]);
    } else if (x === 2) {
      setComponent(prev => [...prev, Test2]);
    } else {
      setComponent(prev => [...prev, Test3]);
    }
  });
}

这里用forEach替代map（因为不需要返回值），并且给setComponent传递一个函数，prev参数会拿到当前最新的组件数组状态，每次更新都基于前一次的结果，这样三次更新就能依次叠加，最终添加三个组件。

方案二：一次性构建完整数组后更新（更高效） #

如果要添加的组件数量固定，更推荐先把所有要添加的组件收集到一个数组里，然后一次性更新状态，减少不必要的重渲染：

function MultipleComponent() {
  const componentsToAdd = newArray.map(x => {
    switch(x) {
      case 1: return Test;
      case 2: return Test2;
      default: return Test3;
    }
  });
  setComponent(prev => [...prev, ...componentsToAdd]);
}

这种方式只调用一次setComponent，性能更好，代码也更简洁。

额外的代码优化建议 #

1. 把Test、Test2、Test3这些组件移到App组件外部，避免每次App渲染都重新创建这些组件，减少不必要的重渲染。
2. 移除代码里那个空的useEffect(() => {});，它会在每次渲染时都执行，没有实际意义，反而可能影响性能。

最后给你贴一份完整的优化后的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react-lite";

// 组件移到外部，避免重复创建
const Test = observer(() => {
  return (
    <div>
      <p>Test</p>
    </div>
  );
});

const Test2 = observer(() => {
  return (
    <div>
      <p>Test2</p>
    </div>
  );
});

const Test3 = observer(() => {
  return (
    <div>
      <p>Test3</p>
    </div>
  );
});

function App() {
  const [component, setComponent] = useState([]);
  const newArray = [1, 2, 3];

  function MultipleComponent() {
    const componentsToAdd = newArray.map(x => {
      switch(x) {
        case 1: return Test;
        case 2: return Test2;
        default: return Test3;
      }
    });
    setComponent(prev => [...prev, ...componentsToAdd]);
  }

  return (
    <div>
      {component.map((Input, index) => (
        <Input key={index} />
      ))}
      <button onClick={() => setComponent([...component, Test])}>
        Single Component
      </button>
      <button onClick={MultipleComponent}>Multiple Component</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这样修改后，点击Multiple Component按钮就能正确添加三个组件啦~

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