Блог

У меня есть требование, согласно которому для каждой строки таблицы(строки динамически заполняются) у меня есть кнопка «Подробности», которая должна отображаться модально при нажатии. Как мне сохранить состояние для каждой строки этой таблицы, чтобы React знал, на какую строку я нажимаю, и, следовательно, передавал реквизиты соответственно модальному компоненту?

Я попробовал создать массив всех ложных значений с длиной, такой же, как у моих данных. План состоит в том, чтобы обновить логическое значение для определенной строки при нажатии кнопки. Однако я не могу выполнить то же самое.

Вот что я пробовал до сих пор:

 let initTableState = new Array(data.length).fill(false) const [tableState, setTableState] = useState(initTableState) const detailsShow = (index) =gt; {  setTableState(...tableState, tableState[index] = true) }  

Я получаю «данные» из базы данных. В деталях функции я пытаюсь каким-то образом получить индекс строки, чтобы я мог обновить соответствующее состояние в «Состоянии таблицы». Кроме того, вот как выглядит мой код для вставки в модальный компонент, размещенный сразу после ввода строк:

 {tableState[index] amp;amp; DetailModal}  

Здесь DetailModal-это модальный компонент. Мы будем очень признательны за любую помощь в разрешении этого варианта использования!

Это tableState один объект массива. Вы также распространяете массив в функцию setTableState обновления, функция обновления состояния также принимает только один аргумент значения состояния или функцию обратного вызова для обновления состояния.

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

 const detailsShow = (index) =gt; {  setTableState(tableState =gt; tableState.map((el, i) =gt; i === index ? true : el)) }  

Если вы не хотите сопоставлять предыдущее состояние и предпочитаете сначала мелко скопировать массив и обновить конкретный индекс:

 const detailsShow = (index) =gt; {  setTableState(tableState =gt; {  const nextTableState = [...tableState];  nextTableState[index] = true;  return nextTableState;  }) }