React-chartjs-2 - 每个数据集都需要一个唯一的键

Question

当我尝试使用两个数据集渲染图表时收到此警告。（只是一个警告，它呈现正常）

[react-chartjs-2] Warning: Each dataset needs a unique key. By default, the "label" property on each dataset is used. Alternatively, you may provide a "datasetKeyProvider" as a prop that returns a unique key.

我看到它说它尝试使用标签作为键，但由于我在其中放置了一个变量，因此不能保证它是唯一的。我看到一些解决方案，人们使用 Math.random() 作为传递给组件的道具，但是当我这样做时，它会删除我的一个数据集。是否有关于如何删除此警告的最佳做法？

谢谢！

const data = {
    labels: [
      "1MO",
      "3MO",
    ],
    datasets: [
      {
        label: props.chartItems?.[0]["create_date"],
        data: [
          props.chartItems?.[0]["one_month"],
          props.chartItems?.[0]["three_month"],
        ],
        backgroundColor: "red",
        borderColor: "red",
        fill: false,
        lineTension: 0,
        radius: 8,
      },
      {
        label: props.chartItems?.[1]["create_date"],
        data: [
          props.chartItems?.[1]["one_month"],
          props.chartItems?.[1]["three_month"],
        ],
        backgroundColor: "green",
        borderColor: "lightgreen",
        fill: false,
        lineTension: 0,
        radius: 4,
      },
    ],
  };

  return (
    <React.Fragment>
      <Line data={data} />
    </React.Fragment>
  );

Answer 1

您可以为每个数据集使用 returns 随机 ID 的 datasetKeyProvider。这是一个如何使用它和使用 btoa 创建随机字符串的函数的示例。

 const datasetKeyProvider=()=>{ 
     return btoa(Math.random()).substring(0,12)
 } 

  return (
    <React.Fragment>
      <Line 
          data={data} 
          datasetKeyProvider={datasetKeyProvider}
      />
    </React.Fragment>
  );

React-chartjs-2 - 每个数据集都需要一个唯一的键

React-chartjs-2 - Each dataset needs a unique key

reactjs

chart.js

react-chartjs