Reactjs 在用户向下滚动时获取更多内容

我有一个搜索输入页面，一旦用户点击提交结果就会出现

可能会有很多结果，我不想一次加载所有结果，如何在鼠标移动时使用Lodash throttle将更多数据提取到页面中

这是我的反应组件：

const getContacts = async (searchString) => {
  const { data: contactsInfo} = await axios.get(`api/Contats/Search?contactNum=${searchString}`);
  return contactsInfo;
};
export default class Home extends React.Component {
  state = {
    contactsInfo: [],
    searchString: '',
  };

  handleSubmit = async () => {
    const { searchString } = this.state;
    const contactsInfo = await getContacts(searchString);
    this.setState({ contactsInfo });
  };

  onInputChange = e => {
    this.setState({
      searchString: e.target.value,
    });
  };

  onMouseMove = e => {

  };

  render() {
    const { contactsInfo, searchString, } = this.state;
    return (
          <div css={bodyWrap} onMouseMove={e => this.onMouseMove(e)}>
            <Header appName="VERIFY" user={user} />
            {user.viewApp && (
              <div css={innerWrap}>
                <SearchInput
                  searchIcon
                  value={searchString || ''}
                  onChange={e => this.onInputChange(e)}
                  handleSubmit={this.handleSubmit}
                />
                     {contactsInfo.map(info => (
                      <SearchResultPanel
                        info={info}
                        isAdmin={user.isAdmin}
                        key={info.id}
                      />
                    ))}
              </div>
            )}
            <Footer />
          </div>

    );
  }
}

const getContacts=async（searchString）=>{
const{data:contactsInfo}=wait axios.get（`api/Contats/Search？contactNum=${searchString}`）；
返回联系人信息；
};
导出默认类Home扩展React.Component{
状态={
联系人信息：[]，
搜索字符串：“”，
};
handleSubmit=async（）=>{
const{searchString}=this.state；
const contactsInfo=等待获取联系人（搜索字符串）；
this.setState（{contactsInfo}）；
};
onInputChange=e=>{
这是我的国家({
searchString:e.target.value，
});
};
onMouseMove=e=>{
};
render（）{
const{contactsInfo，searchString，}=this.state；
返回(
这个.onMouseMove（e）}>
{user.viewApp&&(
这个.onInputChange（e）}
handleSubmit={this.handleSubmit}
/>
{contactsInfo.map（信息=>(
))}
)}
);
}
}

我认为，使用

getContacts（）

可以检索所有联系人，然后您只想以某种速率显示它们，就像显示前20个联系人一样，当您到达最后一个联系人时，会显示另外20个联系人。 只是问一下，因为这与“让我们获取前20个联系人，显示他们，当用户到达最后一个联系人时，再获取另20个联系人”不同

因此，如果我所做的第一个假设是正确的，我可以告诉您使用交叉点观察者API

这在像您这样的情况下非常有用（它甚至写在文档“页面滚动时图像或其他内容的延迟加载”中）

我们的想法是，您应该添加此交叉点观察者，并开始对最后一张图像进行观察：一旦最后一张图像出现在屏幕上，此观察者将运行回调（您甚至可以决定必须出现在屏幕上的图像的百分比）。 例如，您可以说，只要屏幕上出现1px的图像，您就可以添加另一个20s的图像

请注意，一旦显示另一个20秒图像，您必须取消观察当前观察图像，并观察新的最后一个图像

我也可以建议不要把观察者放在最后一张图片上，但可能放在最后三张图片上

编辑：我不确定这是否回答了您的问题。如果我认为“当用户向下滚动更多内容”的标题是这样做的，但它实际上并不使用鼠标（即使我认为这个实现是你的目标最好的）。 EDIT2:好了，我添加了小提琴，这是代码笔：

注意，我用不同颜色的div模拟了联系人。现在的情况是，当屏幕上出现最后三个联系人（div）时，会在状态中添加新联系人。现在联系人只是空对象，但您可以在

fetchMoreContent（）

中运行fetch或执行任何您想要的操作。这够清楚吗？：）我也对代码进行了注释

/*只是一个创建随机十六进制颜色的函数*/
函数randomColor（）{
让randomColor='#'；
常量字母='0123456789ABCDEF'；
for（设i=0；i<6；i++）{
randomColor+=字母[Math.floor（Math.random（）*16）]；
}
返回随机颜色；
}
类Home扩展了React.Component{
contactList=null；//引用包含联系人的div。
contactObserved=null；//观察到的联系人。
intersectionObserver=null；//intersectionObserver对象。
建造师（道具）{
超级（道具）；
this.contactList=React.createRef（）；
此.state={
加载：对，
联系人显示：0，
联系人：[]
};
}
componentDidMount（）{
/*在此处执行提取。我正在使用setTimeout（）假装提取*/
设置超时（（）=>{
const contacts=[]；
for（设i=0；i{
如果（索引{
/*检索最后的第三个联系人*/
const contactsDOM=this.contactList.current.GetElementsByCassName（“联系人”）；
const thirdLastContact=contactsDOM[contactsDOM.length-3]；
/*如果当前第三个触点与当前观察到的触点不同，
*然后观察目标必须改变*/
if（thirdLastContact！==观察到此.contacts）{
/*如果观察到接触，我们将不进行观察并断开电源
*交叉口观察员*/
if（this.intersectionObserver&&this.contactObserved）{
this.intersectionObserver.unobserve（this.contactObserved）；
this.intersectionObserver.disconnect（）；
}
/*我们创建一个新的交叉点观察者，然后开始观察新的第三个交叉点
*最后一次接触*/
this.intersectionObserver=新的intersectionObserver（this.loadMoreContent{
root:null，
阈值：0
});
这个.intersectionObserver.observe（第三个联系人）；
这是我的名片