Javascript React Infinity scrool:TypeError:无法读取属性'；抵销'；空的

我试图实现一个无限滚动，但面临“TypeError:Cannotreadproperty'offsetTop'ofnull”。我在下面附上了我的实现。我是新的反应，我想得到你的建议，更好地实施

     loadMore = () => {

       this.setState({page: this.state.page + 1})
       this.loadUser();
      };

      handleScroll = () => { 
        var lastLi = document.querySelector("div.container-fluid > div:last-child");
        var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
        var pageOffset = window.pageYOffset + window.innerHeight;
      if (pageOffset > lastLiOffset) {
             this.loadMore();
        }
      };

    componentWillMount() {
        this.loadUser();
        this.scrollListener = window.addEventListener("scroll", e => {
            this.handleScroll(e);
          });
     }

    render() {

        if(this.state.dataStatus == false) {
            return (
                <div>
             <Header />   
                <h4>Loading</h4>

            </div>
            );
        } else {
        return(
            <div>
        <Header />   
            <PostContainer posts={this.state.data}/> 

        </div>
        );
        }
    }
}

loadMore=（）=>{
this.setState（{page:this.state.page+1}）
this.loadUser（）；
};
handleScroll=（）=>{
var lastLi=document.querySelector（“div.container-fluid>div:last-child”）；
var lastLiOffset=lastLi.offsetTop+lastLi.clientHeight；
var pageOffset=window.pageYOffset+window.innerHeight；
如果（pageOffset>lastLiOffset）{
这是loadMore（）；
}
};
组件willmount（）{
this.loadUser（）；
this.scrollListener=window.addEventListener（“滚动”，e=>{
这是handleScroll（e）；
});
}
render（）{
if（this.state.dataStatus==false）{
返回(
加载
);
}否则{
返回(
);
}
}
}

PostContainer代码->它遍历数组并调用Renderpost

class PostContainer extends Component {

constructor(props) {
    super(props);
}

      render() {

           const menu = this.props.posts.map(post => {
            return (

                <RenderPost post={post}/>
            )
            });

          return (
            <div className="container-fluid">
            <div className="row justify-content-center">
               {menu}
            </div>
        </div>
          );
      }

}

类后容器扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const menu=this.props.posts.map（post=>{
返回(
)
});
返回(
{menu}
);
}
}

RenderPost代码

 return(

                <div className="post-holder shadow-sm p-3 mb-4 bg-white rounded" key={this.props.post.id}>

            </div>
           );

返回(
);

尝试了解React.js中的

ref

，我们不使用

querySelector
文档。如果没有匹配项，querySelector
可以返回
null
。在访问属性之前，一定要检查是否返回了有效的
HTMLElement

此外，我认为选择器
“div.container-fluid>div:last child”
更有可能与
div匹配，因为它是
“div.container-fluid”
的直接子级

取而代之的是，您似乎希望将此内部div呈现的最后一篇文章作为目标。使用
id
可能会更容易

<div className="row justify-content-center" id="post-container">
  {menu}
</div>

改为在componentDidMount中添加事件侦听器
var lastLi = document.querySelector("div#post-container > div:last-child");