有条件地更改访问器时 react-table 上的最小反应错误
Minified react error on react-table when changing accessor conditionally
我有一个来自 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},
{(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
在您的代码中,列缺少依赖项。
它会导致错误。
const columns = useMemo(() => [
{
Header: 'Id',
accessor: 'station_id'
},
{
Header: 'Type',
accessor: 'type_name'
},
{
Header: 'Location',
accessor: 'location',
Cell: (cell) => (
<span>
{cell.row.original.location},
{(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>
)
},
], []);
我有一个来自 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},
{(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
在您的代码中,列缺少依赖项。 它会导致错误。
const columns = useMemo(() => [
{
Header: 'Id',
accessor: 'station_id'
},
{
Header: 'Type',
accessor: 'type_name'
},
{
Header: 'Location',
accessor: 'location',
Cell: (cell) => (
<span>
{cell.row.original.location},
{(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>
)
},
], []);