开发者问题收集

React 无限滚动:TypeError:无法读取 null 的属性“offsetTop”

2020-06-04
94

我正在尝试实现无限滚动,但遇到了“TypeError:无法读取 null 的属性‘offsetTop’”。我已将我的实现附加在下面。我是 React 的新手,我很乐意听取您的建议,以便更好地实现。

     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>
        );
        }
    }
}

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>
          );
      }

}

RenderPost 代码

 return(

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

            </div>
           );
2个回答
如果没有匹配项,

document.querySelector 可能会返回 null 。在访问其属性之前,您一定要检查是否返回了有效的 HTMLElement

此外,我认为选择器 "div.container-fluid > div:last-child" 更有可能与 <div className="row justify-content-center"> div 匹配,因为它是 "div.container-fluid" 的直接子元素。

相反,您似乎想要定位由此内部 div 呈现的最后一篇文章。使用 id 可能会使这更容易

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

然后更新处理程序

var lastLi = document.querySelector("div#post-container > div:last-child");
Drew Reese
2020-06-04

尝试了解 ref ,在 React.js 中我们不使用 querySelector

shai_sharakanski
2020-06-04