React.js -从API获取数组数据，并将其修改为“#”以形成十六进制颜色。

import React, { useEffect, useState } from 'react';

function ColorHexConverter() {
  const [colors, setColors] = useState([]);

  useEffect(() => {
    // 假设的API URL
    const fetchColors = async () => {
      try {
        const response = await fetch('https://api.example.com/colors');
        const data = await response.json();
        // 假设API返回的是RGB数组
        const hexColors = data.map(rgb => rgbToHex(rgb));
        setColors(hexColors);
      } catch (error) {
        console.error('Error fetching colors:', error);
      }
    };

    fetchColors();
  }, []);

  // 将RGB转换为十六进制的函数
  const rgbToHex = (rgb) => {
    return "#" + rgb.map(c => {
      let hex = c.toString(16);
      return hex.length == 1 ? "0" + hex : hex;
    }).join("");
  };

  return (
    <div>
      {colors.map((color, index) => (
        <div key={index} style={{ backgroundColor: color, width: '50px', height: '50px', display: 'inline-block' }}></div>
      ))}
    </div>
  );
}

export default ColorHexConverter;