react-chartjs-2 Line组件如何动态渲染lines数组的全部数据集？

代码问题根源 #

• 遍历业务数据生成折线配置时，每条配置被多余包裹了一层数组，最终生成的lines是二维嵌套数组，不符合Chart.js对datasets字段的参数格式要求
• 自定义的getItem方法逻辑存在硬伤：循环执行第一次迭代时就触发return，直接终止遍历流程，仅能返回数组的第一个元素，完全无法获取后续的数据集配置

具体修复方案 #

1. 调整data.map的返回逻辑：去掉每条折线配置外层的多余数组包裹，让遍历生成的结果为一维的折线配置对象数组
2. 完全删除冗余的getItem方法：该方法的实现没有实际业务价值，直接将处理完成的一维配置数组赋值给datasets字段即可
3. 优化颜色生成逻辑：同一条折线的边框色、填充色复用一次随机生成的颜色，避免两次独立调用getRandomColor导致同一条线的两个颜色不一致

修复后的完整代码如下：

import { Line } from "react-chartjs-2";
import getRandomColor from "../functions";

export default function LineChartComponent({ data }) {
  // 直接生成一维的折线配置数组
  const datasets = data.map(val => {
    const lineColor = getRandomColor();
    return {
      label: val.name,
      data: val.value,
      fill: false,
      backgroundColor: lineColor,
      borderColor: lineColor,
      borderWidth: 3
    };
  });

  const database = {
    labels: ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"],
    // 直接传入数据集数组，移除多余的getItem调用
    datasets: datasets
  };

  return <Line data={database} height={300} width={400} />;
}

注意：Chart.js 的datasets字段本身就要求接收一维的配置对象数组，数组长度对应渲染的折线数量，只要传入的数组格式符合要求，组件会自动完成所有折线的渲染，不需要额外做循环拼接操作。

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