重新加载我的 reactJS 项目时我遇到"Error: Maximum update depth exceeded"

Question

我得到错误：在重新加载我的react项目后，超过了最大更新深度。我正在制作一个动态表，其中的列数根据JSON文件中的数据而变化。错误似乎只发生在的这一行代码中

const data = useMemo(() => MOCK_DATA, []);
const columns = Object.keys(data[1]).map((key, id) => {
return {
Header: key,
accessor: key
};
}); 

这是整个js文件

export const DisplayTable = () => {
const data = useMemo(() => MOCK_DATA, []);
const columns = Object.keys(data[1]).map((key, id) => {
return {
Header: key,
accessor: key
};
});
console.log(columns);
const tableInstance = useTable({
columns,
data
});
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = tableInstance;
return (
<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>
);
})}
</tbody>
</table>
);
};

Answer 1

如果您使用react-table，请确保：

列还需要memoized，因此您需要像数据一样包装在useMemo中。文档

const columns = useMemo(
() => Object.keys(data[1])
.map((key, id)=>{
return {
Header: key,
accessor: key
}
}, [data])