React中input color组件HEX转RGB失败，始终返回[0,0,0]

核心问题分析 #

1. 未传递参数给转换函数：所有hexToRGB()调用都没传值，函数内的hex_value为undefined，拼接成0xundefined后转数值是NaN，位移操作结果全为0。
2. HEX值未去除#号：直接给hex_value加0x会得到0x#xxxxxx，这是无效十六进制格式，无法正确解析。
3. 初始State格式错误："#fffff"是5位无效HEX值，正常HEX颜色应为6位（如#ffffff）。
4. 状态更新时机问题：handleSliderChange2中先调用lightOn再setHexValue，此时state尚未更新，lightOn会使用旧的颜色值。

修复后的代码 #

const LightDetailCondo = () => {
  // 修正初始值为有效6位HEX
  const [hex_value, setHexValue] = useState("#ffffff");
  
  const hexToRGB = (hex) => {
    // 去除#号，处理缩写格式（如#fff转#ffffff）
    const cleanedHex = hex.replace('#', '').padStart(6, '0');
    // 转换为十六进制数值
    const hexNum = parseInt(cleanedHex, 16);
    // 提取RGB分量
    const r = (hexNum >> 16) & 0xFF;
    const g = (hexNum >> 8) & 0xFF;
    const b = hexNum & 0xFF;
    return `[${r}, ${g}, ${b}]`;
  }

  const handleSliderChange2 = (e) => {
    const selectedHex = e.target.value;
    setHexValue(selectedHex);
    // 直接传递选中的HEX值给lightOn，避免依赖state更新时机
    lightOn(selectedHex);
    console.log(selectedHex);
  }

  // 测试转换函数时传入当前state值
  console.log(hexToRGB(hex_value));

  const lightOn = async(selectedHex) => {
    const rgbColor = hexToRGB(selectedHex);
    console.log("Body sent to server", { rgb_color: rgbColor });
    try {
      await axios.post('xxx.com',
        { rgb_color: rgbColor },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        });
      console.log('Color Changed!');
    } catch (err) {
      console.log('Missed Color Changed!', err);
    }
  }

  return (
    <div>
      <input type="color" name="favorite_color" onChange={handleSliderChange2} />
    </div>
  );
}
export default LightDetailCondo;

关键修复说明 #

• 传递参数：所有hexToRGB调用都传入具体的HEX值（state或选中的目标值）。
• 清理HEX格式：移除#号，并处理缩写的3位HEX（自动补全为6位），确保解析有效。
• 修正初始值：使用标准6位HEX值，避免初始转换错误。
• 调整调用时机：在handleSliderChange2中直接传递选中的HEX值给lightOn，无需等待state更新，保证传递的是最新颜色值。
• 优化错误处理：将then/catch改为try/catch，更符合async/await的写法，同时打印错误信息便于排查。

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