有条件地更改访问器时 react-table 上的最小反应错误

Question

我有一个来自 API 的数据，我想在 table 中显示它。所以我决定使用 react-table 因为它重量轻而且是 'headless'。现在，我需要在其中一列中显示带有条件的多个值，但我得到了这个错误：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState 
inside componentWillUpdate or componentDidUpdate. React limits the number of nested 
updates to prevent infinite loops.

这是我的代码：

const columns = useMemo(() => [
    {
        Header: 'Id',
        accessor: 'station_id'
    },
    {
        Header: 'Type',
        accessor: 'type_name'
    },
    {
        Header: 'Location',
        accessor: 'location',
        Cell: (cell) => (
            <span>
              {cell.row.original.location},&nbsp;
              {(cell.row.original.barangay === null ? '' : (cell.row.original.barangay === "") ? '' : cell.row.original.barangay + ', ')} 
              {(cell.row.original.municipality === null ? '' : (cell.row.original.municipality === "") ? '' : cell.row.original.municipality + ', ')} 
              {cell.row.original.province}
            </span>
        )
    },
]);

const data = useMemo(() => stations, [])

const { 
    getTableProps, 
    getTableBodyProps, 
    headerGroups, 
    rows, 
    prepareRow, 
} = useTable({ columns, data })

return (
    <div>
          <table {...getTableProps()}>
            <thead>
              {headerGroups.map(headerGroup => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => (
                    <th {...column.getHeaderProps()}>{column.render('Header')}</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>
                )
              })}
              <tr>
                <td></td>
              </tr>
            </tbody>
          </table>
    </div>
)

这是我的数据样本：

{
    "station_id": "0016782",
    "location": "l-1",
    "barangay": "Brgy-1",
    "municipality": "",
    "province": "RXI",
    "type_name": "P-Sensor",
},

然后我希望 table 看起来像这样：

    Id          |   Type        |   Location
    0016782     |   P-Sensor    |   l-1, Brgy-1, RXI

Answer 1

在您的代码中，列缺少依赖项。它会导致错误。

const columns = useMemo(() => [
    {
        Header: 'Id',
        accessor: 'station_id'
    },
    {
        Header: 'Type',
        accessor: 'type_name'
    },
    {
        Header: 'Location',
        accessor: 'location',
        Cell: (cell) => (
            <span>
              {cell.row.original.location},&nbsp;
              {(cell.row.original.barangay === null ? '' : (cell.row.original.barangay === "") ? '' : cell.row.original.barangay + ', ')} 
              {(cell.row.original.municipality === null ? '' : (cell.row.original.municipality === "") ? '' : cell.row.original.municipality + ', ')} 
              {cell.row.original.province}
            </span>
        )
    },
], []);

有条件地更改访问器时 react-table 上的最小反应错误

Minified react error on react-table when changing accessor conditionally

reactjs

react-table

react-table-v7