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

【问题标题】：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 中是对我收到空指针错误的那个地方的评论。

标签： javascript reactjs react-native graphql react-apollo

【解决方案1】：

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

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

【讨论】：