为啥从子组件返回时我会从查询结果中获得空指针？

Posted 2023-03-08

【中文标题】为啥从子组件返回时我会从查询结果中获得空指针？

【英文标题】：Why i'll get null pointer from Query results when come back from child component?为什么从子组件返回时我会从查询结果中获得空指针？

【发布时间】：2020-03-24 20:22:29

【问题描述】：

您好，我的 react 应用有问题。我有一个包含主题列表的页面，这些主题是我通过 react-apollo 查询获得的数据。此页面具有将我链接到另一个组件的操作。

然后在那个子组件中，我有 Button Back，当我单击它时，它会将我返回到该视图列表...但是这次它抛出了空指针错误，我不知道为什么会发生这种情况。

const getSubject = `query GetSubject($id: ID!) 
  getSubject(id: $id) 
    id
    name
    description
    packages(limit:999) 
      items 
        id
        name
        description
        order
        themes(limit:999)
          items 
            id
            name
            order
          
        
      
    
  

`;

function SubjectView(props) 
  const classes = useStyles();
  let width = window.innerWidth;
  let years = [];
  const [rocnikValue, setRocnik] = useState(0);
  const [mobile, setMobile] = useState(0);


  useEffect(() => 
    function changeSize() 
      if ((window.innerWidth < 960) && (mobile === false)) 
        setMobile(true);
      
      else if  ((window.innerWidth > 960) && (mobile === true)) 
        setMobile(false);
      
      else return;
    
    window.addEventListener("resize", changeSize.bind(this));
    return function cleanup() 
      window.removeEventListener("resize", changeSize.bind(this));
    ;
  );

  const handleSelect = event => 
    setRocnik(event.target.value);
  ;

  return (
    <>
      <Query
        query=gql(getSubject)
        variables= id: props.match.params.subjectId 
      >
        result => 
          if (result.loading) 
            return (
              <LinearProgress />
            );
          

          if (result.error) 
            return (
              <Typography color="error" variant="body1">
                result.error
              </Typography>
            );
          
         /* HERE I GET NULL POINTER ERROR */
          result.data.getSubject.packages.items
            .sort((a, b) => a.order - b.order)
            .map((item,i) => years[i] = item.name)
          if (!rocnikValue.length) 
            setRocnik(years[0]);
            return null;
          

          if (width < 960) 
            if (!mobile.length) setMobile(true);
            return (
              <div className=classes.page>
                <SubjectHeader 
                  subject = result.data.getSubject
                  years = years
                  handleSelect = handleSelect
                  rocnik = rocnikValue
                />
                result.data.getSubject.packages.items
                  .sort((a, b) => a.order - b.order)
                  .map((pkg, pkgIndex) => (
                    <Fragment key=pkgIndex>
                      pkg.name === rocnikValue &&
                        <MobileView
                          key = pkgIndex
                          rocnik = pkg
                        />
                      
                    </Fragment>
                ))
              </div>
            );
          
          else 
            if (!mobile.length) setMobile(false);
            return (
              <div className=classes.page>
                <SubjectHeader 
                  subject = result.data.getSubject
                  years = years
                  handleSelect = handleSelect
                  rocnik = rocnikValue
                />
                <DesktopView 
                  subject = result.data.getSubject
                  rocnik = rocnikValue
                />
              </div>
            );
          
        
      </Query>
    </>
  );

我认为带有后退按钮的子组件并不重要。

为什么会这样？

【问题讨论】：

在 SubjectView 中是对我收到空指针错误的那个地方的评论。

【参考方案1】：

您已检查变量加载和错误。我也会在使用之前检查数据。像这样的：

if (result.data && result.data.hasOwnProperties('getSubject') && result.data.getSubject) 
...insert your actions here
 else 
  return null <== If it's Ok...