Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs TypeError:无法读取属性';fetchMore';阿波罗中未定义的_Reactjs_Graphql_Apollo - Fatal编程技术网

Reactjs TypeError:无法读取属性';fetchMore';阿波罗中未定义的

Reactjs TypeError:无法读取属性';fetchMore';阿波罗中未定义的,reactjs,graphql,apollo,Reactjs,Graphql,Apollo,我正在用阿波罗和React实现一个无限卷轴。一切正常。当我离开Feed再回到Feed时,我会遇到一个奇怪的错误: TypeError:无法读取未定义的属性“fetchMore” 还有其他人有过这方面的经验吗?我发现了,但似乎还没有任何解决办法。其中一个答案提到了部分解决方案“在执行fetchMore之前检查路由”,但我不知道这是什么意思 我还处于开发的中期,所以我还没有机会清理这个组件,但这里是: import React, { useEffect, useRef } from 'react';

我正在用阿波罗和React实现一个无限卷轴。一切正常。当我离开Feed再回到Feed时,我会遇到一个奇怪的错误:

TypeError:无法读取未定义的属性“fetchMore”

还有其他人有过这方面的经验吗?我发现了,但似乎还没有任何解决办法。其中一个答案提到了部分解决方案“在执行fetchMore之前检查路由”,但我不知道这是什么意思

我还处于开发的中期,所以我还没有机会清理这个组件,但这里是:

import React, { useEffect, useRef } from 'react';
import { useQuery } from '@apollo/client';
import PostUpdateOrShow from '../posts/types/showOrUpdate/PostUpdateOrShow.js'
import Cookies from 'js-cookie';
import Queries from '../../graphql/queries';
import InfiniteScroll from './util/Infinite_Scroll.js';
const { FETCH_USER_FEED, FETCH_TAG_FEED } = Queries;

const Feed = ({
  user, tag
}) => {
  let fetchMoreDiv = useRef(null);
  let cursorId = useRef(null);
  
  useEffect(() => {
    var scroll = document.addEventListener('scroll', function(event) {
      fetchMoreDiv.current = document.querySelector('#fetchMore')
      var el = fetchMoreDiv.current.getBoundingClientRect()
      var elTop = el.top
      var elBottom = el.bottom
      var innerHeight = window.innerHeight
      
      if (elTop >= 0 && elBottom <= innerHeight) {
        fetchMore({
          query: gqlQuery,
          variables: {
            query: query,
            cursorId: cursorId.current
          },
        })
      }
    })

    return () => {
      document.removeEventListener('scroll', scroll)
    }
  })

  var gqlQuery
  var query
  if (user) {
   gqlQuery = FETCH_USER_FEED
   query = user.blogName
  } else if (tag) {
   gqlQuery = FETCH_TAG_FEED
   query = tag.title.slice(1)
  } else {
   gqlQuery = FETCH_USER_FEED
   query = Cookies.get('currentUser')
  }
  
  let { loading, error, data, fetchMore } = useQuery(gqlQuery, {
    variables: {
      query: query,
      cursorId: null
    },
  })
  
  if (loading) return 'Loading...';
  if (error) return `Error: ${error}`;
  
  const { fetchUserFeed, fetchTagFeed } = data

  cursorId.current = fetchUserFeed ? fetchUserFeed[fetchUserFeed.length - 1]._id :
  fetchTagFeed[fetchTagFeed.length - 1]._id
  
  if (tag) {
    return(
      <div>
        <div>
          {fetchTagFeed.map((post, i) => {
            return (
              <div
                className='post'
                key={post._id}
              >
                <PostUpdateOrShow
                  post={post}
                />
              </div>
            )
          })}
          </div>
          <InfiniteScroll 
            fetchMoreDiv={fetchMoreDiv}
          />
          <div
            id='fetchMore'
          >
          </div>
      </div>
    )
  } else {
    return(
      <div>
        <div>
          {fetchUserFeed.map((post, i) => {
            return (
              <div
                className='post'
                key={post._id}
              >
                <PostUpdateOrShow
                  post={post}
                />
              </div>
            )
          })}
          </div>
          <InfiniteScroll 
            fetchMoreDiv={fetchMoreDiv}
          />
          <div
            id='fetchMore'
          >
          </div>
      </div>
    )
  }
}

export default Feed;

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
       fields: {
         fetchLikesRepostsAndComments: {
           merge: (existing = [], incoming = []) => {
             return incoming
           }
        },
        fetchUserFeed: {
          keyArgs: ['query'],
            merge: (existing = [], incoming = []) => {
            const elements = [...existing, ...incoming].reduce((array, current) => {
              return array.map(i => i.__ref).includes(current.__ref) ? array : [...array, current];
            }, []);
            
            return elements
        },
        }
      }
    }
  }
  }),
  errorLink
})