React：如何重新安裝一個兄弟組件重新運行componentDidMount？

在我的應用程序中，用戶有多個..讓我們說'狗'。當前選中的狗出現在標題中，並且可以通過標題的下拉菜單進行更改。在選擇他們的新狗後，它在後端將其標記爲primary: true，並且我將相應的標頭UI更新。從那時起，所有到後端的請求都會返回primary狗的結果。React：如何重新安裝一個兄弟組件重新運行componentDidMount？

我有一個Layout.jsx組件，如下所示：

<Header /> 
<div> 
    {this.props.children} 
</div>

在this.props.children，我渲染多個不同的資源索引頁，即一個子組件的例子可能是TreatsContainer其中一個網絡請求在componentDidMount到/treats之間，結果在我的佈局中呈現。

我面臨的問題是，當用戶在標頭組件中更改他們的狗時，我想讓其他組件重新運行它們在componentDidMount中進行的相同網絡請求，以便新選擇的狗顯示數據。我在應用程序中的幾個地方實現了Redux，但我不想將所有數據存儲在全局狀態樹中，因爲用戶可以創建多少資源沒有限制。我的意思是，我不希望所有數據來自/treats，/toys，/foods等等。處理這種情況的好方法是什麼？

來源

2017-10-06 mycellius

當'Header'中的選擇改變時，'Layout'中的道具是否改變？如果不是，他們可能應該。然後，您可以使用相同的網絡調用實現'componentWillReceiveProps'（可能在* both *方法之外定義，因此不必重複）。我認爲試圖卸載/重新安裝是一個隱藏實際問題的XY問題。你可以爲頭選擇一個單獨的redux狀態元素，並將'Layout'連接到它。 –

我不確定我完全理解你的問題，但我仍然會盡力回答它，以盡我所能。據我所知，你有一個Header組件，它設置primary dog。並且您希望您的子組件在此primary dog發生更改時從後端獲取新數據。

我會做到這一點的方式是

存儲當前primary dog在終極版商店和解僱你Header組件的操作時，它的變化，更新它。
從每個子組件，從商店訪問primary dog如使用mapStateToProps
在每個子組件的道具，做一個調用後端在componentWillReceiveProps當this.props.primaryDog != nextProps.primaryDog

來源

2017-10-06 17:58:47 palsrealm

我同意獲取相關數據@ palsrealm的建議的方法，但這裏有一個選擇，如果你正在使用react-router：

把primary dog「的ID在URL中，

<Route path="/:dogId" component={DogIndex} />

然後當用戶選擇主要狗時，您可以路由到索引頁面。

<Link to=`/${selectedDogId}` />

然後你的組件（DogIndex）將安裝和componentDidMount將閃光。

來源

2017-10-06 18:48:06

React：如何重新安裝一個兄弟組件重新運行componentDidMount？

回答

相關問題