reactjs - 组件没有在 ReactJs 中的输入属性更改时重新渲染

Question

我是 ReactJs 的新手。我有一个父组件，我在其中使用 Redux persist（本地存储）管理列表。我传递给 React-table 子组件的相同列表。在一个按钮上单击一个 Modal 弹出，我修改列表的一行。成功更新输入列表后，表不会重新呈现。我将不得不刷新页面以反映表格中的更改。

下面是我的代码：

import React, { useMemo } from 'react';
import { useTable, useSortBy, useGlobalFilter, useFilters, usePagination, useRowSelect } from 'react-table';
import { MdNavigateNext } from "react-icons/md";
import { MdSkipNext } from "react-icons/md";
import { GrFormPrevious } from "react-icons/gr";
import { MdSkipPrevious } from "react-icons/md";

import GlobalFilter from './global-filter/global-filter.component'
import ColumnFilter from './column-filter/column-filter.component';
import Checkbox from './checkbox/checkbox.component';
import './table.style.css';

const SortingTable = props => {

  const { payload, COLUMNS } = props;

  const columns = useMemo(() => COLUMNS, [])

  const [data, setData] = useState([])

  useEffect(() => {
    setData(payload)
  }, [payload])

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    prepareRow,
    pageOptions,
    gotoPage,
    pageCount,
    setPageSize,
    state,
    setGlobalFilter,
    selectedFlatRows
  } = useTable({
    columns,
    data
  }, useFilters,
    useGlobalFilter,
    useSortBy,
    usePagination,
    useRowSelect)

  const { globalFilter, pageIndex, pageSize } = state

  return (
    <>
      <h1 className="cat-table-header">Category List :</h1>
      <GlobalFilter className='global-filter' filter={globalFilter} setFilter={setGlobalFilter} />
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render('Header')}
                  {/* <div>{column.canFilter ? column.render('Filter') : null} </div> */}
                  <span>
                    {column.isSorted ? (column.isSortedDesc ? ' ' : ' ') : ''}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      <div>
        <span>
          Go to page:{' '}
          <input
            type='number'
            defaultValue={pageIndex + 1}
            onChange={e => {
              const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
              gotoPage(pageNumber)
            }}
            style={{ width: '50px' }}
          />
        </span>
        <span>
          Page{' '}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>
        </span>
        <MdSkipPrevious onClick={() => gotoPage(0)} disabled={!canPreviousPage} />
        <GrFormPrevious onClick={() => previousPage()} disabled={!canPreviousPage} />
        <MdNavigateNext onClick={() => nextPage()} disabled={!canNextPage} />
        <MdSkipNext onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} />
        {'Show'}
        <select
          value={pageSize}
          onChange={e => setPageSize(Number(e.target.value))}>
          {[10, 15, 25, 35, 45].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              {pageSize}
            </option>
          ))}
        </select>
      </div>
    </>
  )
}

export default SortingTable;

请帮助解决这个问题。

标签： reactjsreact-hooksreact-tablererender