从子组件返回React页面后，Apollo查询结果空指针错误求助

嘿，我帮你分析下这个问题的可能原因，以及对应的解决思路：

最直接的原因：缺少嵌套属性的空值保护 #

你代码里直接访问 result.data.getSubject.packages.items 的地方，没有对中间可能出现的 null/undefined 做任何检查。当从子组件返回页面时，组件会重新挂载，Apollo 可能会重新执行查询（或者缓存的数据出现异常），这时候 getSubject、packages 甚至 items 都有可能是 null：

• 比如 API 临时返回了 getSubject: null（比如缓存过期、后端临时异常）
• 或者 packages 字段返回的是 null，而不是你预期的 { items: [] } 结构

这种情况下直接访问嵌套属性，必然会触发空指针错误。

次要问题：render 中直接 setState 导致的渲染混乱 #

你在 render 逻辑里直接修改普通数组 years，然后调用 setRocnik(years[0]) 并返回 null。这会触发组件重新渲染，但此时 Query 的数据可能还处于不稳定状态，后续渲染时容易出现数据未准备好的情况，加重空指针的概率。

具体解决方案 #

1. 给嵌套属性加上空值检查
   用可选链操作符（?.）或者逐层判断来避免直接访问不存在的属性：

   // 替换原来的 years 赋值代码
   const packagesItems = result.data?.getSubject?.packages?.items || [];
   const sortedPackages = packagesItems.sort((a, b) => a.order - b.order);
   const years = sortedPackages.map(item => item.name);
   

   或者更严谨一点，先判断数据是否完整：

   if (!result.data?.getSubject?.packages?.items) {
     return <Typography variant="body1">暂无相关数据</Typography>;
   }
   // 再执行后续的排序、赋值逻辑
   

2. 优化状态初始化逻辑
   不要在 render 过程中直接调用 setState，改用 useEffect 来处理初始值的设置：

   // 把 rocnikValue 的初始值设为 null
   const [rocnikValue, setRocnik] = useState(null);
   
   // 在 Query 的 render prop 里：
   const sortedPackages = result.data.getSubject.packages.items.sort((a, b) => a.order - b.order);
   const years = sortedPackages.map(item => item.name);
   
   // 用 useEffect 来初始化 rocnikValue
   useEffect(() => {
     if (years.length > 0 && rocnikValue === null) {
       setRocnik(years[0]);
     }
   }, [years, rocnikValue]);
   

3. 修复 useEffect 的事件监听问题
   你的 useEffect 没有依赖数组，会导致每次渲染都重复绑定/解绑事件，而且 bind(this) 在函数组件里完全没用（函数组件没有 this），修改成这样：

   useEffect(() => {
     function changeSize() {
       const currentWidth = window.innerWidth;
       if (currentWidth < 960 && !mobile) {
         setMobile(true);
       } else if (currentWidth > 960 && mobile) {
         setMobile(false);
       }
     }
     window.addEventListener("resize", changeSize);
     return () => {
       window.removeEventListener("resize", changeSize);
     };
   }, [mobile]); // 添加 mobile 作为依赖，避免不必要的重复绑定
   

4. 检查 Apollo 缓存配置
   如果是缓存数据异常导致的问题，可以尝试调整 Query 的 fetchPolicy，强制重新获取数据：

   <Query 
     query={gql(getSubject)} 
     variables={{ id: props.match.params.subjectId }}
     fetchPolicy="cache-and-network" // 优先用缓存，同时后台更新缓存
     // 或者用 "network-only" 强制每次都从接口拉取数据
   >
   

总结 #

最可能触发你当前空指针的原因就是嵌套属性没有空值检查，先加上可选链或者逐层判断，应该就能解决问题。剩下的优化是为了让组件逻辑更稳定，避免后续出现类似的问题。

内容的提问来源于stack exchange，提问作者Young L.