Question

我有一个简单的应用程序，它由一个home组件，一个add组件，一个Listing组件组成。 Home组件具有列表和添加组件。在添加组件我将一些项目添加到本地存储和列表组件我正在检索这些项目并显示为列表。列表组件没有任何道具，它直接从本地存储获取数据并返回ul列表。我想知道，有没有一种方法，当我将数据保存到本地存储时，同时我的列表应该更新，这意味着必须有一些方法，如果我点击保存按钮列表组件应该呈现更新清单。我可以手动触发任何组件的渲染方法而不使用状态。

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

Answer 2

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

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

更新react js中事件的兄弟组件

2 个答案: