Блог

Я все еще привыкаю к запоминанию реакций и состояний, поэтому заранее приношу извинения, если это простое/очевидное решение, которого мне не хватает.

Я загружаю таблицу данных, в которой N строк, в зависимости от того, сколько элементов добавлено пользователем, а последний столбец таблицы-кнопка удаления. Пользователь может удалить столько элементов, сколько захочет, и таблица не будет перерисована, пока он не нажмет кнопку сохранить. Поэтому, когда пользователь нажимает «Удалить», я хочу показать кнопку «Отменить» на ее месте, чтобы пользователь мог отменить. Вот соответствующий код: DeleteUndoButton:

 import React, { useState } from 'react'

export const DeleteUndoButton = ({
  handleDelete,
  handleUndoDelete
}) => {
  const [isTempDeleted, setTempDeleted] = useState(false)
  const handleClick = evt => {
    if (!isTempDeleted) {
      handleDelete()
    } else {
      handleUndoDelete()
    }
    setTempDeleted((prevState) => !prevState)
  }

  if (isTempDeleted) {
    return (
      <button onClick={handleClick}>
        Undo
      </button>
    )
  }
  return (
    <button onClick={handleClick}>
      Delete
    </button>
  )
}
 

Стол:

 
const IntegrationsTable = React.memo(
  ({
    tableData,
    handleDelete,
    handleUndoDelete,
  }) => {

    const deleteUndoColumn = useMemo(
      () => ({
        Header: 'Delete',
        disableSortBy: true,
        className: 'text-center',
        Cell: ({ row }) => (
          <DeleteUndoButton
            handleDelete={handleDelete}
            handleUndoDelete={handleUndoDelete}
          />
        )
      }),
      [
        handleDelete,
        handleUndoDelete,
      ]
    )

    const columns = useMemo(
      () => [
        {
          Header: 'Last Edited By',
          Cell: ({ row }) => (
            <>
              <!-- jsx -->
            </>
          )
        },
        {
          Header: 'Last Edited',
          Cell: ({ row }) => <!-- JSX -->
        },
        deleteUndoColumn
      ],
      [deleteUndoColumn]
    )

    const data = useMemo(() => {
      return [...tableData]
      },
     [tableData])
    const { headers, rows, prepareRow } = useTable({ columns, data }, useSortBy)

    return (<>{//JSX}</>)
}
 

Когда я нажимаю кнопку DeleteUndoButton , щелчок срабатывает, как я и ожидал, но состояние никогда не меняется и дисплей не обновляется. Я считаю useMemo , что проблема возникает из-за столбцов, но я не уверен в том, как лучше всего решить эту проблему. Я не знаю, есть ли чистый способ управления состоянием для списка N deleteUndoButtons за пределами таблицы, так как я никогда не узнаю, сколько строк будет deleteUndoButtons отображаться на странице.

Я также уже использую deleteUndoButton его в других местах, поэтому в идеале я бы не стал менять код там, но я готов создать новый для работы с таблицей. Спасибо!