如何遍历含嵌套对象数组的CarParts数组并保持索引顺序

你的代码逻辑本身是正确的，map方法会严格按照数组的索引顺序遍历元素，只要CarParts数组和内部嵌套的tyres数组本身的顺序符合预期，就能输出你想要的结果。

需要优化的是内层map的索引变量不要和外层重复，避免作用域混淆，把内层的index改成tyreIndex即可：

{CarParts.map((parts, index) => (
  <div key={index}>
    {parts.system && (
      <div className="bg-red-500">
        <p>System: {parts.system}</p>
      </div>
    )}

    {parts.tyres && (
      <>
        {parts.tyres.map((tyre, tyreIndex) => (
          <div className="bg-green-500" key={tyreIndex}>
            <p>Tyre: {tyre}</p>
          </div>
        ))}
      </>
    )}
  </div>
))}

核心说明： #

• Array.map() 会遵循数组的原始索引顺序处理每个元素，只要你的CarParts数组按Engine→Exhaust Pipe排列，内部tyres数组按Bridgestone→Michelin→Goodyear排列，就能得到预期的输出顺序。
• 内层使用独立的tyreIndex作为索引变量，避免和外层index冲突，提升代码可读性。
• 如果后续数组元素有增删或排序变更，建议使用元素的唯一标识作为key，而非索引，避免渲染异常。

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