javascript - 在react js中更新事件的同级组件

Question

我有一个简单的应用程序，它由一个 home 组件、一个 add 组件、 Listing 组件组成。首页组件有列表和添加组件。在添加组件中，我将一些项目添加到本地存储，在列表组件中，我正在检索这些项目并显示为列表。 Listing组件没有任何props，它直接从本地存储获取数据并返回ul list。我想知道，有没有一种方法可以在我将数据保存到本地存储时同时更新我的​​列表，这意味着如果我单击“保存”按钮，列表组件应该以某种方式呈现更新的列表。我可以在不使用状态的情况下手动触发任何组件的渲染方法吗？

Answer 1

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