React-Table повторно отображает всю таблицу при выборе - PullRequest
Новая
       19

React-Table повторно отображает всю таблицу при выборе

1 голос
/ 28 июня 2019

У меня есть относительно стандартная таблица реагирования со строками, которые можно выбрать - реализовать с помощью HOC SelectTable, так же, как в примере с таблицей реагирования:

https://github.com/tannerlinsley/react-table/blob/v6/docs/src/examples/selecttable/index.js

Основным отличием одного из моих столбцов является пользовательский компонент: 

 const columns = [
      {
      ...other columns...
      {
        Header: "Sound file",
        accessor: "sound_file",
        Cell: props => {
          return <SoundFilePlayer url={props.row.sound_file_url} />;
        },

        minWidth: 80
      }
    ];

С компонентом SoundFilePlayer, являющимся компонентом Reaction-player , который воспроизводит звуковой файл, переданный в компонент в качестве реквизита. По сути, он загружает переданный URL и воспроизводит звуковой проигрыватель:

Перед загрузкой URL (с продолжительностью по умолчанию 0:00)

enter image description here

Затем рендеринг с правильной продолжительностью после загрузки:

enter image description here

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

Я предполагаю, что все ключи строки проверяются, чтобы убедиться, что они выбраны в настоящий момент, что приводит к повторному рендерингу всей таблицы.

В любом случае, я могу перерисовать только выбранную строку, а не всю таблицу? Я посмотрел на https://reactjs.org/docs/state-and-lifecycle.html а также несколько других SO-постов, но, похоже, они не могут перерисовать только затронутую строку. Или даже просто заново визуализировать столбец с флажком?

1 Ответ

0 голосов
/ 28 июня 2019

Вы можете попробовать запомнить компонент с помощью ловушки useMemo следующим образом:

const file = React.useMemo(() => <SoundFilePlayer url={props.row.sound_file_url} />, [props.row.sound_file_url]);

Он не будет воссоздавать функцию компонентов и извлекает ее из памяти, пока не будет изменен URL-адрес файла.

...