Question

我想使用带有钩子的render props函数，但是我不确定是否可行。

我有一个使用renderprop的FetcherComponent，但我想使用

中的setState

export const HierarchyGraph: React.FunctionComponent = () => {
  const [rootNode, setRootNode] = useState<HierarchyNode<GraphicalNode> | null>(null);

  return (
    <Fetcher
      url="/hierarchy"
      initialData={{}}
      render={({ data }: { data: TreeData }) => {
          // this will cause infinite recursion
          setRootNode(getHierarchy(data));

在这种情况下我不应该使用渲染道具吗？

Answer 1

由于setRootNode导致HierarchyGraph的重新渲染而导致无限递归，这再次触发setRootNode。您需要找到一种在不需要时停止此状态更新的方法，例如：

export const HierarchyGraph = () => {
  const [data, setData] = useState({});

  return (
    <Fetcher
      url="/hierarchy"
      initialData={data}
      render={({ data: newData }) => {
          if(data !== newData) { 
            setData(newData);
          }
      }}
    />
  );
}

Answer 2

您可以使用渲染道具，但是必须在HierarchyGraph的渲染函数中进行分支以检测是否必须进行调用。否则，该请求将被多次触发。这是一个简单的示例：

const HierarchyGraph = () => {
  const [rootNode, setRootNode] = useState(null);

  if (!rootNode) {
    return (
      <Fetcher
        url="/hierarchy"
        initialData={{}}
        render={({ data }) => {
          setRootNode(getHierarchy(data));
        }}
      />
    );
  }

  return <div>render the data related to rootNode</div>;
};

另一种解决方案是在render函数中内联调用并在每个render上执行操作。这取决于用例，但如果操作便宜，则可能会更简单。最后一种选择是利用useEffect而不是Fetcher组件。它的用法比render prop模式更适合，因为您只能显式触发一次对API的调用。

如何在反应中使用渲染道具处理useEffect

2 个答案: