如何基于交替模式进行条件渲染，为产品卡片设置循环切换的背景色

你在渲染逻辑的map遍历中直接调用状态更新方法setBgColor，React中状态更新会触发组件重新渲染，重渲染后又会再次执行map逻辑调用setBgColor，因此会触发无限循环，该需求完全不需要用组件状态存储当前背景色。

方法1：基于遍历索引取模（推荐，最简洁高效） #

提前定义好顺序固定的背景色数组，利用map方法的第二个参数index对数组长度取余，直接获取当前项对应的背景色即可，自动循环：

// 按你需要的顺序定义背景色数组
const BG_COLORS = ['green', 'blue', 'red', 'purple']

// 渲染卡片逻辑
products.map((item, index) => (
  <div style={{ backgroundColor: BG_COLORS[index % BG_COLORS.length] }}> 
     <h1>{item.name}</h1>
  </div>
))

该方法没有额外的状态开销，不管产品列表长度是多少，都会自动按照绿、蓝、红、紫的顺序循环分配背景色。

方法2：临时变量记录当前颜色（适合颜色顺序动态变化的场景） #

如果你的背景色顺序需要动态调整，不想硬编码取模逻辑，可以在渲染函数内用临时变量记录当前颜色，不要用组件状态：

// 渲染逻辑内部，map遍历前定义
let currentBg = 'green'
// 定义颜色对应下一个颜色的映射，方便后续修改
const nextBgMap = {
  green: 'blue',
  blue: 'red',
  red: 'purple',
  purple: 'green'
}

// 渲染卡片逻辑
products.map(item => {
  const curItemBg = currentBg
  // 更新下一个元素的背景色
  currentBg = nextBgMap[curItemBg]
  return (
    <div style={{ backgroundColor: curItemBg }}> 
       <h1>{item.name}</h1>
    </div>
  )
})

小提示：你原有代码中紫色对应的下一个颜色误写为蓝色，不符合你要的循环往复需求，上述方案已修正为紫色之后回到绿色。

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