React中如何遍历颜色数组并将元素赋值给组件的backgroundColor样式属性

问题根因 #

• 你定义的colorsArr是普通JS变量，不属于React状态，修改该变量不会触发组件重渲染，所以渲染逻辑始终拿到的是初始化的空数组
• 渲染判断里你直接写了colorCheckHandler，没有调用这个函数，函数本身是truthy值，判断永远为真，这时候数组还没填充完成，自然取不到对应索引的颜色值

正确实现代码 #

import { useState, useEffect } from 'react';

function YourComponent() {
  // 用useState存储颜色数组，修改后会触发重渲染
  const [colorsArr, setColorsArr] = useState([]);

  useEffect(() => {
    const tempColors = [];
    for (let i = 0; i <= 8; i++) {
      // 补全可能出现的不足6位的十六进制颜色，避免样式失效
      const generateColor = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
      tempColors.push(generateColor);
    }
    // 一次性更新状态
    setColorsArr(tempColors);
  }, []);

  return (
    <div>
      {/* 不需要单独写判断函数，直接判断数组长度即可，还可以直接map生成9个带对应背景色的组件 */}
      {colorsArr.length === 9 ? colorsArr.map((color, index) => (
        <span 
          key={index}
          style={{
            width: '50px',
            height: '50px',
            display: 'inline-block',
            backgroundColor: color
          }}
        />
      )) : null}

      {/* 如果要单独取某一个索引的颜色，直接写就行 */}
      {colorsArr[0] && <span style={{backgroundColor: colorsArr[0]}} />}
    </div>
  )
}

补充说明 #

额外加了padStart(6, '0')的处理，是因为随机数转十六进制的时候可能出现不足6位的情况，会导致颜色值无效，加上这个逻辑可以保证生成的都是标准6位十六进制颜色。

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