ReactJs проблемы с сеттом в массиве в ChartJs - PullRequest
Новая
       18

ReactJs проблемы с сеттом в массиве в ChartJs

1 голос
/ 10 июля 2019

Очень странная проблема, с которой я работаю в Reaction-chart-js 2, у меня есть две скрипки, чтобы ясно продемонстрировать эту проблему.В основном я использую axios для извлечения данных API для создания своих диаграмм, когда я щелкаю заголовок таблицы (заголовок имени или номера) для сортировки данных, данные столбца диаграммы портятся и не работают должным образом.Однако если я использую базовые фиктивные данные для функции componentDidMount, такие как [1,2,3,4], тогда сортировка диаграмм работает точно так, как ожидалось.Почему это происходит.

Fiddle 1 (с правильными данными componentDidMount и сортировкой, вызывающей проблемы)

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

Fiddle 2 (фиктивные данные и сортировка работают как ожидалось

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

1 Ответ

1 голос
/ 10 июля 2019

Мне кажется, проблема в том, как вы вводите свой элемент в метод 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 и обнаружил, что его привязка к идентификатору элементов данных (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

Имейте в виду, что это не сохраняет этот по общему признанию очень плавный переход на линейных графиках, но это, мы надеемся, должно указать вам правильное направление.

...