反応するjs内のイベントの兄弟コンポーネントを更新する

Question

私はホームコンポーネント、追加コンポーネント、リストコンポーネントからなる単純なアプリケーションを持っています。ホームコンポーネントには、一覧表示と追加コンポーネントがあります。コンポーネントを追加するには、いくつかのアイテムをローカルストレージに追加しています。リストコンポーネントでは、これらのアイテムを取得してリストとして表示しています。リストコンポーネントには小道具がありません。ローカルストレージから直接データを取得し、ulリストを返します。私が知りたかったのは、ローカルのストレージにデータを保存するときに、リストを更新する必要があるということです。つまり、保存ボタンをクリックすると何らかの方法でリスト項目をレンダリングする必要があります。更新リスト。状態を使用せずに手動で任意のコンポーネントのレンダリングメソッドをトリガできますか？

Answer 1

があり、各要素は、ローカルストレージ

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

Answer 2

this.forceUpdate（）は仕事に追加した後、これだけ、このメソッドを呼び出し、再レンダリングするthis.forceUpdate()と呼ばれる方法であるが、ほとんどの場合、安価な修正ですあなたは避けたいものです。実際の保存のためのローカルストレージ、必要に応じて再レンダリングをトリガーする状態の2つの場所にリストを持つことができます。あなたのアプリは次のようになります：

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