reactjs - 重新加载我的 reactJS 项目时出现“错误：超出最大更新深度”

Question

我收到错误：重新加载我的反应项目后超出了最大更新深度。我正在制作一个动态表，其中列数根据 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>
  );
};

标签： reactjs

Answer 1

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

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

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