FlexRender 功能组件 Tanstack React Table v8

Question

我正在重建一个 v8 的反应表，其中一个单元格是一个功能组件，它根据 Id 值显示状态。

我的 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())

有了这个，当单元格呈现时，我只得到“待定”，组件上的状态没有得到更新，即使在 API 提供响应之后也是如此。

我使用

cell.render("Cell")

在 React-Table v7 上有相同的概念，它按预期工作。

Answer 1

flexRender 正在创建一个新组件而不是重新渲染它。我建议您将它包装在 useMemo 下，以便 React 跟踪先前创建的引用，或者只是尝试实现您自己的逻辑，例如 cell.column.columnDef.cell 是否是 React 组件并相应地渲染它。