React Table v8中FlexRender渲染状态组件不更新问题求助

问题描述 #

升级React-Table到v8版本后，表格内的Status组件仅显示初始"Pending"状态，API获取到结果后组件状态无法更新。相同逻辑在v7版本使用cell.render("Cell")可正常工作。

相关代码 #

Status组件 #

function Status({ id }) {
  const [status, setStatus] = useState("pending");
  useEffect(() => {
    getApi(`/status/${id}`).then((stat) => {
      setStatus(stat);
    });
  }, []);
  return status == "pending" ? (
    <p>Pending</p>
  ) : (
    <p>{status}</p>
  );
}

列定义 #

columnHelper.accessor("id", {
      header: () => "Latest Status",
      cell: (info) =>  <Status id={info.getValue()} />
})

FlexRender渲染代码 #

flexRender(cell.column.columnDef.cell,cell.getContext())

解决办法 #

1. 补全useEffect依赖项 #

Status组件的useEffect依赖数组为空，导致id变化时不会重新触发API请求。将id加入依赖数组，并在请求前重置状态：

function Status({ id }) {
  const [status, setStatus] = useState("pending");
  useEffect(() => {
    setStatus("pending"); // 重置状态为pending
    getApi(`/status/${id}`).then((stat) => {
      setStatus(stat);
    }).catch(err => {
      console.error("获取状态失败:", err);
      setStatus("error"); // 可选：处理错误状态
    });
  }, [id]); // 添加id作为依赖
  return status == "pending" ? (
    <p>Pending</p>
  ) : status === "error" ? (
    <p>Error</p>
  ) : (
    <p>{status}</p>
  );
}

2. 给组件添加唯一Key #

React-Table v8的flexRender可能依赖组件key来识别重渲染，给Status组件添加基于id的唯一key：

columnHelper.accessor("id", {
  header: () => "Latest Status",
  cell: (info) => <Status key={info.getValue()} id={info.getValue()} />
})

3. 确认API请求逻辑 #

检查getApi是否正确返回数据，确保请求没有被拦截或失败。添加错误捕获可以避免因请求失败导致状态一直停留在pending。

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