我正在使用react-infinite-scroll来渲染数据源。每当用户更改其设置时,我希望刷新数据源。
为此,我在
然而,该组件并未重置。为什么?
为此,我在
InfiniteScroll
组件中有一个关键属性。这样做的想法是每当用户更改其设置时,刷新数据源。
this.state.renderCount
is incremented by 1 insetState
React notices that the key prop of
InfiniteScroll
is different, and re-renders the component from scratch.<Content style={{ padding: "0px 20px" }}> <InfiniteScroll key={this.state.renderCount} style={{ width: "100%", height: "100%" }} pageStart={0} loadMore={this.loadPosts.bind(this)} hasMore={true} loader={<div>Loading....</div>} useWindow={false} > {listItems} </InfiniteScroll> </Content>
刷新代码位于componentDidUpdate
中,如果我确定需要刷新,则调用该代码:
this.setState({ renderCount: this.state.renderCount + 1 })
然而,该组件并未重置。为什么?
key
属性,以确保兄弟元素可以被唯一识别。这可能是为什么您的组件没有刷新的原因。我建议尝试使用不同的属性名称,看看是否按预期工作。 - Mikkel