ReactJs 在 ChartJs 中对数组设置状态的问题

Question

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

Fiddle 1（具有正确的 componentDidMount 数据和导致问题的排序）

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

Fiddle 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

的一个分支 link

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

ReactJs 在 ChartJs 中对数组设置状态的问题

ReactJs issues with setstate on array in ChartJs

javascript

html-table

reactjs

chart.js

chart.js2