this.props.next不是使用Apollo客户端进行React的InfiniteScroll.onScrollListener函数

时间:2019-06-25 11:29:05

标签: reactjs graphql infinite-scroll react-apollo

我正在尝试在我的应用中实现无限滚动器。我知道onLoadMore中的代码并不完全正确,但是由于未调用onLoadMore,因此无法对其进行事件调试。

我遇到了休闲错误

index.js:282 Uncaught TypeError: this.props.next is not a function at InfiniteScroll.onScrollListener (index.js:282) at InfiniteScroll.<anonymous> (index.js:469)

有什么主意吗?

 class Users extends React.Component {
    render() {
      const skip = 12;
      const limit = 12;

      return (
         <Query query={GET_USERS} variables={{ limit }}>
          {({ error, data: { users }, fetchMore }) => {
           console.log("users", users);

           return  (
             <UserList
               items={users}
               onLoadMore={() =>
                  fetchMore({
                   query: GET_USERS,
                   variables: { limit, skip },
                    updateQuery: (previousResult, { fetchMoreResult }) => {
                     console.log("fetchMoreResult", fetchMoreResult);
                     const previousEntry = previousResult.entry;
                     const newUsers = fetchMoreResult.users;
                     const newCursor = fetchMoreResult.moreComments.cursor;

                     return {
                       cursor: newCursor,
                       entry: {
                         comments: [...newUsers, ...previousEntry.users]
                      },
                      __typename: previousEntry.__typename
                     };
                   }
                 })
               }
             />
           );
        }}
       </Query>
     );
   }
 }


 class UsersList extends React.Component {
   componentDidUpdate() {
     this.attachScrollListener();
   }

  render() {
    const { items = [], onLoadMore } = this.props;
    return (
         <InfiniteScroll
           dataLength={items.length}
           loadMore={onLoadMore}
           hasMore={true}
           loader={<p>Loading...</p>}
         >
           {items.map(user => (
              <Column
               key={user.id}
             >
               <UserCard {...user}> </UserCard>
            </Column>
           ))}
         </InfiniteScroll>
     );
   }
}

0 个答案:

没有答案