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

问题描述

当我尝试使用两个数据集渲染图表时，我收到此警告。 （只是发出警告就可以了）

[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.

我看到它说它试图使用label作为键，但是由于我在其中放置了一个变量，因此不能保证它是唯一的。我看到了一些解决方案，其中人们使用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",radius: 4,};

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

解决方法

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

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

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