Question

我有一个包装的父组件，它接受一些与布局相关的道具，还有一个子组件（代表一个页面），该子组件需要通过Apollo运行GraphQL查询，并用结果更新该父道具（例如页面标题）。父母需要我需要更新的道具不是我选择的模式，而是我必须使用的组件的实现。

App = () {
  const [layout, setLayout] = useState({});

  return (
    <Wrapper layout={layout: 'foo'}>
      <PageComponent setLayout={setLayout} />
    </Wrapper>
  );
}


PageComponent = (props) => {
  const { loading, error, data } = useQuery(QUERY); // Apollo's useQuery

  useEffect(() => {
    props.setPageParams({ title: data.lists[0].title });
  }, [data]);

  if (loading) return <p>Loading</p>;
  if (error) return <p>Error</p>;

  return (
    <p>component!</p>
  );
}

我尝试了太多不同的方法来将它们全部记录下来，但是结果是两件事之一：useEffect中的循环（我有点理解，我认为传递{{ 1}}到data会导致它设置父级的道具并每次都重新渲染孩子，因为它是一个对象并且没有经过深入比较），或者以下情况：

useEffect

后一种情况是在尝试一些没有Cannot update a component (`App`) while rendering a different component (`PageComponent`).的方法时发生的，例如：

useEffect

我还尝试过使用useQuery的if(data && data.lists && awaitingPageLayout) { props.setLayout({ title: data.lists[0].title }); awaitingPageLayout = false; }，我相信这会导致另一个循环。

希望朝着正确的方向前进，我在这里没有主意。感谢您的时间！

阿波罗的useQuery并使用其结果更新父母的道具

0 个答案: