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