如何为随机添加的多对象数组添加索引并按索引排序映射？

要实现按实际添加顺序合并并渲染两个数组的元素，核心是给每个元素分配全局唯一的递增顺序标识，再基于这个标识排序后渲染。以下提供两种实现方案：

方案一：统一管理所有元素（推荐） #

将所有添加的元素存入同一个数组，通过全局递增的order字段记录添加顺序：

import { useState } from 'react';

export default function App() {
  const [objOne, setObjOne] = useState("");
  const [objTwo, setObjTwo] = useState("");
  // 存储所有添加的元素，包含类型、内容、顺序标识
  const [items, setItems] = useState([]);
  // 记录下一个元素的顺序值，保证唯一性
  const [nextOrder, setNextOrder] = useState(0);

  const AddObjOne = () => {
    if (!objOne.trim()) return; // 过滤空输入
    setItems(prev => [...prev, {
      type: 'printOne',
      value: objOne,
      order: nextOrder
    }]);
    setNextOrder(prev => prev + 1);
    setObjOne(""); // 添加后清空输入框
  };

  const AddObjTwo = () => {
    if (!objTwo.trim()) return;
    setItems(prev => [...prev, {
      type: 'printTwo',
      value: objTwo,
      order: nextOrder
    }]);
    setNextOrder(prev => prev + 1);
    setObjTwo("");
  };

  // 按order字段排序，确保渲染顺序与添加顺序一致
  const sortedItems = [...items].sort((a, b) => a.order - b.order);

  return (
    <div>
      <div>
        <input 
          type="text" 
          value={objOne}
          onChange={(e) => setObjOne(e.target.value)} 
          placeholder="输入内容添加到One"
        />
        <button onClick={AddObjOne}>Add One</button>

        <input 
          type="text" 
          value={objTwo}
          onChange={(e) => setObjTwo(e.target.value)} 
          placeholder="输入内容添加到Two"
        />
        <button onClick={AddObjTwo}>Add Two</button>
      </div>

      <div className="mt-4">
        {sortedItems.map((item) => (
          <div 
            key={item.order} // 用唯一的order作为key，避免渲染异常
            className={item.type === 'printOne' ? 'bg-red-500 mb-2 p-2' : 'bg-green-500 mb-2 p-2'}
          >
            <p>{item.value}</p>
            <small>添加顺序：{item.order + 1}</small>
          </div>
        ))}
      </div>
    </div>
  );
}

方案二：保留独立数组（适配原有结构） #

如果需要保留两个独立的数组，只需给每个数组的元素添加全局order字段，合并后排序即可：

import { useState } from 'react';

export default function App() {
  const [objOne, setObjOne] = useState("");
  const [objOneArray, setObjOneArray] = useState([]);

  const [objTwo, setObjTwo] = useState("");
  const [objTwoArray, setObjTwoArray] = useState([]);

  const [nextOrder, setNextOrder] = useState(0);

  const AddObjOne = () => {
    if (!objOne.trim()) return;
    setObjOneArray(prev => [...prev, {
      printOne: objOne,
      order: nextOrder
    }]);
    setNextOrder(prev => prev + 1);
    setObjOne("");
  };

  const AddObjTwo = () => {
    if (!objTwo.trim()) return;
    setObjTwoArray(prev => [...prev, {
      printTwo: objTwo,
      order: nextOrder
    }]);
    setNextOrder(prev => prev + 1);
    setObjTwo("");
  };

  // 合并数组后按order排序
  const combinedObjs = [...objOneArray, ...objTwoArray].sort((a, b) => a.order - b.order);

  return (
    <div>
      <div>
        <input 
          type="text" 
          value={objOne}
          onChange={(e) => setObjOne(e.target.value)} 
        />
        <button onClick={AddObjOne}>Add One</button>

        <input 
          type="text" 
          value={objTwo}
          onChange={(e) => setObjTwo(e.target.value)} 
        />
        <button onClick={AddObjTwo}>Add Two</button>
      </div>

      <div>
        {combinedObjs.map((obj) => {
          if (obj.printOne)
            return (
              <div className="bg-red-500 mb-2 p-2" key={obj.order}>
                <p>{obj.printOne}</p>
                <small>添加顺序：{obj.order + 1}</small>
              </div>
            );

          if (obj.printTwo)
            return (
              <div className="bg-green-500 mb-2 p-2" key={obj.order}>
                <p>{obj.printTwo}</p>
                <small>添加顺序：{obj.order + 1}</small>
              </div>
            );
        })}
      </div>
    </div>
  );
}

关键要点 #

1. 全局顺序标识：通过nextOrder变量给每个新添加的元素分配唯一递增的order值，确保能按添加顺序排序
2. 排序逻辑：合并数组后通过sort((a,b) => a.order - b.order)实现升序排列，保证渲染顺序与添加顺序一致
3. 组件key优化：用元素的order字段作为key，比map的index更稳定，避免数组顺序变化时的组件复用异常

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