Компонент, запрашивающий данные после сортировки

Question

У меня есть таблица, которая состоит из двух строк, в одной есть данные, а в другой есть компонент, который является меньшей таблицей.Компонент получает реквизиты и делает запрос на получение API.Проблема возникла, когда я добавил функцию сортировки в большую таблицу.После сортировки небольшой таблицы, которая является перезагрузкой компонента и всегда отправляет новый запрос в API.

Я создал небольшую таблицу, похожую на мою, чтобы показать проблему.

https://codesandbox.io/s/olm0qmly6q

Если вы сортируете таблицу, компонент перезагружается, и axios делает новый запрос на получение

Как можно каким-то образом хранить данные, чтобы ограничить запрос к API?

Спасибо за помощь!

Answer 1

1. Вам необходимо изменить componentWillReceiveProps функцию в Table компоненте на componentDidUpdate и добавить проверку того, что name prop был изменен (или id prop, но вы не передаете этот реквизитTable компонент).
2. Вы должны добавить свойство key к фрагменту, который вы возвращаете из data.map(user => {...}).

Здесь вы можете увидеть результат: https://codesandbox.io/s/2vw54pm780