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 提供了响应，组件上的状态也不会更新。

我在 React-Table v7 上使用了相同的概念，cell.render("Cell")并且它按预期工作。

Answer 1

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