React循环动态给组件传递props时展开为索引对象如何解决

当前写法的核心错误：Object.keys(component.props).map(...)返回的是单属性对象构成的数组，对数组做展开时，JS会将数组数字索引作为键、索引对应元素作为值，最终传入组件的props就会出现0、1、2为键的嵌套结构，和预期的平级结构不符。
逻辑等价验证：

// 你当前写法的展开效果和这段代码完全一致
const props = { ...[{prop1: "prop1"}, {prop2: "prop2"}, {prop3: "prop3"}] }
// props输出：{0: {prop1: "prop1"}, 1: {prop2: "prop2"}, 2: {prop3: "prop3"}}

核心思路：先构造平级的普通props对象，再将对象展开传入组件，禁止直接展开map生成的对象数组。

方案1：Object.fromEntries 写法（最简洁，现代环境推荐） #

将map遍历的返回值改为[属性名, 属性值]格式的键值对数组，再通过Object.fromEntries转为平级对象即可。代码里给component.props加了空对象兜底，避免props为空时Object.keys抛出报错：

{array?.[i] && (
  <Component
    {...Object.fromEntries(
      Object.keys(component.props ?? {}).map(prop => [prop, array[i][prop]])
    )}
  />
)}

该API为ES2019标准，支持所有现代浏览器，无需额外依赖。

方案2：reduce 写法（兼容性最佳） #

通过reduce遍历属性键，直接在初始空对象上挂载对应属性，最终返回完整的平级props对象，兼容ES5及以上环境：

{array?.[i] && (
  <Component
    {...Object.keys(component.props ?? {}).reduce((res, prop) => {
      res[prop] = array[i][prop]
      return res
    }, {})}
  />
)}

场景简化写法 #

如果不需要过滤多余属性，array[i]上的所有属性都需要传给组件，可以直接展开数组项，无需手动遍历属性键：

{array?.[i] && <Component {...array[i]} />}

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