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