React中提升GraphQL查询至父组件后出现未定义属性错误排查

为什么原方式可行？ #

你在ChildComponent里直接用useQuery时，useQuery自带加载状态管理：

• 当数据还在请求中时，useQuery返回的loading为true，此时data是undefined。
• 你大概率在子组件里做了判断（比如只有data存在时才渲染SomeComponent，或者过滤数据时用了可选链/默认值），所以SomeComponent不会拿到undefined，自然不会报错。

提升到父组件后失效的原因 #

把查询提到父组件后，你通过queryResults?.data?.items?.nodes传递数据，这里的可选链只会让父组件不报错，但当请求未完成时，这个表达式的结果是undefined。
如果ChildComponent直接把这个undefined传给SomeComponent，而SomeComponent内部没有做空值校验，直接尝试读取undefined的属性（比如data.length或者data[0].xxx），就会抛出Cannot read properties of undefined错误。

解决方法 #

• 给传递的数组设默认值：父组件传递时改成queryResults?.data?.items?.nodes || []，确保ChildComponent拿到的始终是数组（空数组也不会导致读取属性报错）。
• 在子组件里加校验：ChildComponent接收props后，先判断数据是否存在再渲染SomeComponent，比如：

  // ChildComponent.tsx
  const ChildComponent = ({ nodes }) => {
    if (!nodes) return <div>加载中...</div>;
    const filteredNodes = nodes.filter(/* 你的过滤逻辑 */);
    return <SomeComponent data={filteredNodes} />;
  };
  

• 利用父组件的loading状态：父组件中根据queryResults.loading控制渲染，加载时显示占位符，数据返回后再渲染子组件：

  // ParentComponent.tsx
  const { loading, data } = useQuery(YOUR_QUERY);
  if (loading) return <div>加载中...</div>;
  return (
    <>
      <ChildComponent nodes={data?.items?.nodes || []} />
      <SiblingComponent nodes={data?.items?.nodes || []} />
    </>
  );
  

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