ReactJs 在 ChartJs 中数组上的 setstate 问题

Question

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

小提琴 1(使用正确的组件DidMount 数据和排序导致问题(

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 分支的链接

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