React状态更新时如何保留旧组件并渲染新Box组件？

问题根源在于你每次更新状态时直接替换了原有的data，而非将新数据追加到历史记录中。要实现每次状态变化新增Box组件组，需调整State结构并修改渲染逻辑：

1. 调整State结构 #

将存储单组数据的data改为存储所有历史数据组的数组（比如命名为boxGroups），每次新数据到来时追加到数组末尾：

// 初始化State为空数组
const [boxGroups, setBoxGroups] = useState([]);

// 当从服务器获取到新数据时，追加而非替换
// 假设新数据是数组（长度1/2/4），如果是单个对象则包装成数组：[newData]
const handleNewData = (newData) => {
  // 确保新数据是数组格式（统一处理逻辑）
  const formattedData = Array.isArray(newData) ? newData : [newData];
  setBoxGroups(prevGroups => [...prevGroups, formattedData]);
};

2. 重构渲染逻辑 #

编写一个接收单组数据的渲染函数，然后遍历所有历史数据组渲染：

// 单个Box组的渲染函数
function renderBoxGroup(groupData) {
  if (groupData.length === 0) return null;

  // 根据数据长度匹配对应的col类名
  const colClassName = {
    1: 'col-1',
    2: 'col-2',
    4: 'col-4'
  }[groupData.length] || '';

  return (
    <div className={colClassName}>
      {groupData.map(item => (
        <Box 
          key={item.id} 
          height={`${item.height}px`} 
          width={`${item.width}px`} 
          color={item.color} 
        />
      ))}
    </div>
  );
}

// 最终组件渲染
return (
  <div>
    <EmailSent message={emailSentMessage.message} />
    {/* 遍历所有历史Box组渲染 */}
    {boxGroups.map((group, index) => (
      <div key={index} className="box-group-container">
        {renderBoxGroup(group)}
      </div>
    ))}
  </div>
);

关键说明 #

• State追加而非替换：通过扩展运算符[...prevGroups, formattedData]保留历史数据，确保每次新数据到来时新增一组Box，而非覆盖旧组。
• 统一数据格式：将单个对象包装为数组，保证渲染函数逻辑一致，避免分支判断出错。
• Key的使用：这里用数组索引index作为key，若每组数据有唯一标识（比如后台返回的批次ID），建议替换为该标识以提升React渲染性能。

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