如何解决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>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。