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

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

function ColorData() {
  const [data, setData] = useState([]);  // 用于存储从API获取的数据

  useEffect(() => {
    // 使用axios库从API获取数据
    axios.get('<API_URL>')
      .then(response => {
        // 数据成功获取后进行处理
        const modifiedData = response.data.map(item => {
          // 修改数据为十六进制颜色
          const hexColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
          return { ...item, color: hexColor };
        });
        setData(modifiedData);  // 更新数据状态
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  // 渲染数据
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <span>{item.name}: </span>
          <span style={{ color: item.color }}>{item.color}</span>
        </div>
      ))}
    </div>
  );
}

export default ColorData;