react-table 使用 "useSortBy" 的问题

Question

我在使用 useSortBy 的 react-table 上遇到了一些问题。没有 useSortBy，table 工作正常。收到此错误：

错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

var COLUMNS = [
    {
        Header: 'Data Criação',
        accessor: 'createdAt',
        Cell: ({value})=> {return value ? format(new Date(value),  'dd/MM/yyyy') : ''},
    },
    {
        Header: 'Nome',
        accessor: 'name'
    },
    {
        Header: 'Telefone',
        accessor: 'mobile'
    },
    {
        Header: 'Email',
        accessor: 'email'
    },
    {
        Header: 'Action',
        accessor: (hit)=>{
            return <LeadTableAction item={hit} selection={handleLeadDataSelection}/>
        }
    }
]

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

const tableInst = useTable({
    columns,
    data:props.lead.leadData ? props.lead.leadData : [{}]
}, useSortBy);

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
} = tableInst;

在 JSX 上：

<Table {...getTableProps()}>
    <thead>
        {headerGroups.map(hg=>{
           return (
               <tr {...hg.getHeaderGroupProps()}>
                   {hg.headers.map(h=>{
                   return (
                           <th {...h.getHeaderProps(h.getSortByToggleProps())}>
                              {h.render("Header")}
                                <span style={{marginLeft: '5px'}}>
                              {h.isSorted ? (h.isSortedDesc ? <i className="fas fa-sort-down"></i> : <i className="fas fa-sort-up"></i>) : ''}
                              </span>
                           </th>
                           )
                    })}
              </tr>
              )
         })}
  </thead>
  <tbody {...getTableBodyProps()}>
     {rows.map(row=>{
        prepareRow(row)
        return(
           <tr {...row.getRowProps()}>
               {row.cells.map(cell=>{
               return(
                 <td {...cell.getCellProps()}>
                     {cell.render('Cell')}
                 </td>
                     )
               })}
          </tr>
          )
     })}
  </tbody>

有人可以帮忙吗？

Answer 1

问题已解决，

我只是在我的代码中添加了一个备忘录：

const data = useMemo(()=>{
    return props.lead.leadData ? props.lead.leadData : [{}]
}, [props.lead.leadData]);

这个props.lead是直接在table上获取的数据。完毕！ :)

Answer 2

我一直尝试传递一个空的依赖项数组，我的代码没有在那里抛出任何错误。它只在我使用钩子的地方显示错误。我在 useMemo 数组的依赖项挂钩中传递了数据，它起作用了。

const data = useMemo(() => (employees.data), [employees.data]);

react-table 使用 "useSortBy" 的问题

Problems with react-table using "useSortBy"

reactjs

react-table

react-usememo