ReactJs 与 ChartJs 中数组上的 setstate 问题

【问题标题】：ReactJs issues with setstate on array in ChartJsReactJs 与 ChartJs 中数组上的 setstate 问题
【发布时间】：2019-07-10 18:04:56
【问题描述】：

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

小提琴 1（正确的 componentDidMount 数据和排序导致问题）

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

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

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

【问题讨论】：

标签： javascript reactjs html-table chart.js chart.js2

【解决方案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-6ixcmfork 的链接

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

【讨论】：

随时谢恩！编码愉快！