react添加onScroll事件踩坑

需求:下拉列表做一个懒加载, 拉到最底下的时候加载新数据. 类似微博

 

一开始用onScroll添加在div上面, 发现没有效果

 

接着尝试了 document.getElementById("").onscroll 和 addeventlistener('scroll',func) 和ref等都没有用

一度怀疑人生.

 

之后看了overstack上的方法,也是用的onScroll, 但是人家就可以成功, 对比之后发现我的样式里面少了height.

 

onScroll一定要加在有height属性的容器上

 

代码:

 

 

 

const [page, setPage] = useState(1);
const [info, setInfo] = useState([]);

const onscroll = e => {
    if ( refresh && e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 1) {
      setPage(page+1)
    }
  };

useEffect(() => {
    fetch("...............",{
    })
      .then(res => res.json())
      .then(res => {
        setInfo(info.concat(res));
      });
  },[page]);

<div className={classes.content} onScroll={onscroll}>
{info}
</div>

 

content 样式必须带height.