React中如何循环批量渲染绑定多数组同索引属性的自定义组件

你不需要硬编码每一项的索引，直接利用Array.map回调自带的索引参数就能实现需求，只要四个数组的索引对应关系正确、长度一致即可。

基础实现方式 #

选择任意一个数组调用map方法，遍历回调的第二个参数就是当前项的索引值，直接用这个索引读取其他数组对应位置的属性传入组件即可：

export default function BigContainer({ rain, icon, temperature, date }) {
  return (
    <div className='bigContainer'>
      {/* 拿rain数组做遍历，index就是当前项的索引 */}
      {rain.map((rainVal, index) => (
        <Container
          // 注意：列表渲染必须传key属性，如果列表固定无变动可以用index，否则请用数据唯一标识
          key={index}
          rain={rainVal}
          icon={icon[index]}
          temperature={temperature[index]}
          date={date[index]}
        />
      ))}
    </div>
  )
}

这个写法会自动遍历数组所有项，不管数组长度是3还是更多，都不需要手动写每一个索引位的组件。

更推荐的优化写法 #

因为多数组靠索引关联很容易出现长度不匹配、对应关系错乱的问题，更建议你在拿到数据后先把同索引的字段合并成单一的对象数组，后续遍历和维护都更方便：

export default function BigContainer({ rain, icon, temperature, date }) {
  // 先把同索引的数据整合成统一的对象数组
  const weatherData = date.map((dateVal, index) => ({
    date: dateVal,
    rain: rain[index],
    icon: icon[index],
    temperature: temperature[index]
  }))

  return (
    <div className='bigContainer'>
      {weatherData.map((item) => (
        <Container
          // 如果日期是唯一值，可以直接用日期当key，比用index更稳妥
          key={item.date}
          // 字段名和props一致的话，直接展开运算符传参更简洁
          {...item}
        />
      ))}
    </div>
  )
}

注意事项 #

• 所有React列表渲染都必须给遍历的根节点传key属性，帮助React识别节点更新：如果你的列表是固定顺序、不会做增删/排序操作，用索引当key不会有问题；如果列表会动态变动，一定要用每条数据自带的唯一标识（比如日期、数据ID）当key，避免出现渲染错乱。
• 用多数组索引关联的方案时，建议先校验几个数组的长度是否一致，避免索引越界拿到undefined值。

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