javascript - 从子组件返回时，为什么我会从查询结果中获取空指针？(Why i'll get null pointer from Query results when come back from child component?)

Question

Hi i have problem with my react app.

(嗨，我的应用程式有问题。)

I have page with list of Subjects which data i get with react-apollo query.

(我有一个带有主题列表的页面，该列表是我用react-apollo查询获得的数据。)

This page has action which links me to another component.

(该页面的操作将我链接到另一个组件。)

And then in that Child component i have Button Back which when i click it send me back to that lists of views... BUT this time it throws me null pointer error and i don't why it is happened.

(然后在那个Child组件中，我有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>
    </>
  );
}

Child component with back button is not important i think.

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

Anyway why is this happening ?

(无论如何，为什么会这样？)

  ask by Young L. translate from so

Answer 1

等待大神答复