React中调用data.shift()删除数组首元素导致Table列取值错误问题

核心问题原因 #

• Array.shift()是可变方法，会直接修改原数组，自定义hook返回的data属于不可直接变更的外部数据，直接修改会引发不可预期的渲染异常
• 列配置计算和数组修改逻辑分散在组件顶层，未做缓存，组件每次重渲染都会重复执行逻辑，可能引发取值不一致问题

修正后代码 #

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

const TableSection = ({ query }) => {
  const { data } = useData(query);

  const { columns, queryData } = useMemo(() => {
    if (data.length === 0) {
      return { columns: [], queryData: [] };
    }
    // 单独取出首行做表头配置，不修改原数组
    const headerRow = data[0];
    const columns = Object.keys(headerRow).map((key) => ({
      Header: headerRow[key],
      accessor: key,
    }));
    // 截取下标1之后的元素作为实际表格数据，不修改原数组
    const queryData = data.slice(1);
    return { columns, queryData };
  }, [data]);

  return (
    <div className="col-start-2 col-end-3 row-start-3 row-end-4 mt-3 text-black w-1/2 overflow-x-scroll">
      {queryData.length > 0 && <Table columns={columns} data={queryData} />}
    </div>
  );
};

export default TableSection;

关键改动说明 #

• 用data.slice(1)替代data.shift()，不会修改原数组，直接返回移除首元素后的新数组，无副作用
• 列配置、表格数据的处理逻辑合并到同一个useMemo中，仅当data变化时才重新计算，减少不必要的重复执行
• 渲染判断改为校验处理后的queryData长度，避免原数组仅包含表头没有实际数据时渲染空表格

内容的提问来源于stack exchange，提问作者r121