我也遇到过类似的问题，InfiniteScroll元素会占用整个窗口来滚动......不过，这里有一个小的修正。实际上，你只需要在InfiniteScroll元素中添加“height”，所有的问题就都解决了。这就是为什么它不会触发你的获取数据的原因。下面是一个例子：

const [fetchIsLoading, setFetchIsLoading] = useState(false);
const [contacts, setContacts] = useState([]);

    const loadMoreData = () => {

        if (fetchIsLoading) {
         return;
        }

       setFetchIsLoading(true);
       fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
         .then((res) => res.json())
         .then((body) => {
           setContacts([...contacts, ...body.results]);
           setFetchIsLoading(false);
         })
         .catch(() => {
           setFetchIsLoading(false);
         });
      };

      useEffect(() => {
        loadMoreData();
      }, []);

<div  // < ------------- top level div with id 'scrollableDiv' is not even needed... but it works (if you use it or not)
      // id="scrollableDiv"
      // style={{height: 400}}
    >
      <InfiniteScroll style={{
        // height: 400      <-------- this does not work!
      }}
        dataLength={contacts.length}
        next={loadMoreData}
        hasMore={true}//contacts.length < 15
        loader={
          <Skeleton
            avatar
            paragraph={{
              rows: 1,
            }}
            active
          />
        }
        height={400} //    <--------- however, this works through the way this infinite scroll is set up.
        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
        //scrollableTarget="scrollableDiv" <-------- this is not even needed the way this infinite scroll is set up. Even though you point it to the top level div it works either way...
      >
        <List
          dataSource={contacts}
          renderItem={(item) => (
            <List.Item key={item.email}>
              <List.Item.Meta
                avatar={<Avatar src={item.picture.large} />}
                title={<div style={{ color: '#54BEC6', cursor: 'pointer' }}>{item.name.last}</div>}
                description={item.email}
                onClick={(event) => onClickContactsTab(event, item.name.last)}
              />
              {
                // Use this section to put extra information about the user
                //<div>Extra info?</div>
              }
              
            </List.Item>
          )}
        />
      </InfiniteScroll>
    </div>