Question

我正在使用react-chart-js 2，这是一个很奇怪的问题，我有两个小提琴来清楚地说明这个问题。基本上，我是使用axios提取API数据来创建图表的，当我单击表标题（名称或数字标题）对数据进行排序时，图表列数据混乱并且无法正常工作。但是，如果我在componentDidMount函数上使用基本的虚拟数据，例如[1,2,3,4]，则图表的排序将完全按预期工作。为什么会这样。

提琴1（具有正确的componentDidMount数据和排序问题）

https://codesandbox.io/s/confident-tdd-bj0sr

提琴2（虚拟数据和排序按预期工作

https://codesandbox.io/s/laughing-williams-in5ei

Answer 1

我相信问题在于您如何在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>

我与您的JSFiddle一起玩耍，发现将其键入数据元素id（n.id）会使过滤器按预期方式工作。

我如下更改了它（注意第一个元素上的键）：

{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>

这里是我JSFiddle https://codesandbox.io/s/intelligent-violet-6ixcm的分支的链接

请记住，这不会保留折线图上公认的非常平滑的过渡，但是希望可以为您指明一个正确的方向。

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

1 个答案: