Javascript ChartJs中数组上的setstate的ReactJs问题

我在使用react chart js 2时遇到了一个非常奇怪的问题，我有两个小提琴来清楚地演示这个问题。基本上，我使用axios拉API数据来创建图表，当我单击表格标题（名称或数字标题）对数据进行排序时，图表列数据混乱，无法正常工作。但是，如果我在componentDidMount函数上使用基本的虚拟数据，如[1,2,3,4]，那么图表的排序工作完全符合预期。为什么会发生这种情况

Fiddle 1（具有正确的组件安装数据和导致问题的排序）

FIDLE 2（虚拟数据和排序工作如预期

---

我认为问题在于如何在render（）方法中为元素设置关键帧

你有：

  {this.state.data.map((n, index) => {
          return (
            <tr key={index}>
              <td component="th" scope="row">
                {n.market_cap_rank}
              </td>
              <td> {n.name} </td>

{this.state.data.map（（n，索引）=>{
返回(
{n.market_cap_rank}
{n.name}

我对您的JSFIDLE进行了研究，发现将其键入数据元素id（n.id）会导致过滤器按预期运行

我对其进行了如下更改（注意第一个元素上的键）：

{this.state.data.map（（n，索引）=>{
返回(
{n.market_cap_rank}
{n.name}

这是我的JSFIDLE分支的链接

---

请记住，这并没有保留直线图上公认的非常流畅的过渡，但这应该有望为您指明一个好的方向。

随时Shane！祝您编码愉快！

{this.state.data.map((n, index) => {
          return (
            <tr key={n.id}>
              <td component="th" scope="row">
                {n.market_cap_rank}
              </td>
              <td> {n.name} </td>