我正在尝试在我的应用中实现无限滚动器。我知道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>
);
}
}