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

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

有一个名为this.forceUpdate的方法可以重新渲染，所以只需在每个元素添加到本地存储后调用此方法即可

addItem(elm){    
 localStorage.yourArray.push(elm);
 this.forceUpdate();
}

---

这个.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>
  )
} 

---

如何从add component调用此方法。但是，对于一个可以频繁触发的操作来说，这不是一个好主意，对吗？还有其他可能的方法吗？@AyushGupta是的，这不是个好主意，但可以快速解决。最好让数组处于重新渲染的状态。我已经用代码编辑了我的答案，请看一看