如何为卡片列表中的每张卡片设置不同背景色？

你当前的核心问题是全局生成的colorPicked会让所有卡片共用同一种颜色，而且无需嵌套map就能实现每张卡片的颜色区分，下面提供几种实用方案：

方法1：基于item ID分配固定颜色 #

这种方式能保证同一个卡片每次渲染都用相同颜色，不会随机变动：

const variant = [
  'primary', // 注意：Bootstrap组件的variant属性值为小写，需修改原数组格式
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
]

return (
  <Container>
    <Row className="row gy-4 mt-4">
      {profsData && profsData.data.map((item) => {
        // 用item.id对颜色数组长度取模，得到固定的颜色索引
        const cardVariant = variant[item.id % variant.length]
        return (
          <Col key={item.id} className='col-3'>
            <Card className='h-100 w-100 py-5' variant={cardVariant}>
              <Card.Body>
                <Card.Title>{item.username}</Card.Title>
                <Card.Text>
                  {item.bio}
                </Card.Text>
                {item.college && (<h6 className='fw-bold mt-5'>Collège</h6>)}
                {item.lycee && (<h6 className='fw-bold mb-5'>Lycée</h6>)}
                <Button variant="primary" onClick={() => handleShow(item.id)}>Rendez-Vous</Button>
              </Card.Body>
            </Card>
          </Col>
        )
      })}
    </Row>
  </Container>
)

方法2：生成无重复的随机颜色列表 #

如果需要每张卡片颜色随机且不重复，可以先生成和数据长度匹配的随机颜色数组：

const variant = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
]

// 生成指定长度的无重复随机颜色列表（数据量超过颜色数时循环补充）
const getRandomColorList = (targetLength) => {
  const shuffledVariants = [...variant].sort(() => Math.random() - 0.5)
  const colorList = []
  while (colorList.length < targetLength) {
    colorList.push(...shuffledVariants)
  }
  return colorList.slice(0, targetLength)
}

// 渲染前生成对应长度的颜色列表
const colorList = profsData ? getRandomColorList(profsData.data.length) : []

return (
  <Container>
    <Row className="row gy-4 mt-4">
      {profsData && profsData.data.map((item, index) => (
        <Col key={item.id} className='col-3'>
          <Card className='h-100 w-100 py-5' variant={colorList[index]}>
            <Card.Body>
              <Card.Title>{item.username}</Card.Title>
              <Card.Text>
                {item.bio}
              </Card.Text>
              {item.college && (<h6 className='fw-bold mt-5'>Collège</h6>)}
              {item.lycee && (<h6 className='fw-bold mb-5'>Lycée</h6>)}
              <Button variant="primary" onClick={() => handleShow(item.id)}>Rendez-Vous</Button>
            </Card.Body>
          </Card>
        </Col>
      ))}
    </Row>
  </Container>
)

方法3：每张卡片随机取色（允许重复） #

如果允许颜色重复，直接在map回调里生成随机颜色即可：

const variant = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
]

return (
  <Container>
    <Row className="row gy-4 mt-4">
      {profsData && profsData.data.map((item) => {
        const randomIndex = Math.floor(Math.random() * variant.length)
        const cardVariant = variant[randomIndex]
        return (
          <Col key={item.id} className='col-3'>
            <Card className='h-100 w-100 py-5' variant={cardVariant}>
              <Card.Body>
                <Card.Title>{item.username}</Card.Title>
                <Card.Text>
                  {item.bio}
                </Card.Text>
                {item.college && (<h6 className='fw-bold mt-5'>Collège</h6>)}
                {item.lycee && (<h6 className='fw-bold mb-5'>Lycée</h6>)}
                <Button variant="primary" onClick={() => handleShow(item.id)}>Rendez-Vous</Button>
              </Card.Body>
            </Card>
          </Col>
        )
      })}
    </Row>
  </Container>
)

关键注意点 #

• Bootstrap的Card组件variant属性要求值为小写，需修改原数组的大写开头格式才能生效。
• 方法3会在组件重渲染时重新随机颜色，若需要固定颜色，优先选择方法1或方法2。

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