我有一个简单的应用程序,它由一个 home 组件、一个 add 组件、 Listing 组件组成。首页组件有列表和添加组件。在添加组件中,我将一些项目添加到本地存储,在列表组件中,我正在检索这些项目并显示为列表。 Listing组件没有任何props,它直接从本地存储获取数据并返回ul list。我想知道,有没有一种方法可以在我将数据保存到本地存储时同时更新我的列表,这意味着如果我单击“保存”按钮,列表组件应该以某种方式呈现更新的列表。我可以在不使用状态的情况下手动触发任何组件的渲染方法吗?
最佳答案
this.forceUpdate() 确实有效,但在大多数情况下这是一个你想要避免的廉价修复。您可以在两个位置列出列表:用于实际保存的本地存储,以及在需要时触发重新渲染的状态。您的应用程序可能如下所示:
constructor() {
super()
this.state = {
listings: []
}
}
componentWillMount() {
localStorage.getItem('listings')
this.setState({ listings })
}
saveListing(newListing) {
const listings = this.state.listings.concat([])
listings.push(newListing)
localStorage.setItem('listings', listings)
this.setState({ listings })
}
render() {
return(
<div>
<ul>
{
this.state.listings.map(listing => {
return(
<ListingComponent key={listing.id} listing={ ...listing } />
)
})
}
</ul>
<AddListingComponent addListing={(newListing) => this.saveListing(newListing)} />
</div>
)
}
关于javascript - 在react js中更新事件的同级组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47855075/