如何使用React正確更新父組件

我在這個問題上看到了這個問題的不同變體，但是在我的情況下沒有任何事情可以點擊我。我對React相當陌生，我想看看被認爲是「反應方式」還是最佳實踐。如何使用React正確更新父組件

從高層次看，我有一個「用戶」表，它具有一個觸發輸入模式的按鈕，並允許添加新用戶的功能。

這裏是我的電流分量的樹：

. 
└── UserLayout 
    ├── AddNewUserButton 
     └── UserModal 
    └── UserGrid 
     └── UserGridBody 
      └── UserGridRow

UserLayout被傳遞作爲props我的孩子們組成部分，做我的用戶的初始GET作爲一個國家和更新組件。

UserModal是什麼處理輸入和做我的API的POST。

我的問題是，如何在我的UserModal組件的POST之後獲得我的用戶表更新。我已經看到了將回調函數傳遞給重新設置狀態的子組件的例子，但是在這種情況下，我必須通過兩個級別的組件來實現這一點，並且這讓我覺得我可能會考慮到我的狀態驅動組件不當並且我希望得到一些建議，說明所持的嘗試和真實。什麼是最佳做法？

讓我知道是否它會更有幫助發佈我所有的代碼。我並不認爲這種問題是必要的，但如果它能更好地說明我的問題，我當然可以做到這一點。

來源

2017-09-05 scapegoat17

是的，唯一可行的「vanilla React-way」通過道具傳遞組件。一次一個組件。這適用於一個，也許兩個級別。但是，如果您的應用程序非常複雜，或者此場景非常普遍，則可能需要查看庫，例如[redux]（http://redux.js.org/）或[MobX]（https：// mobx.js.org/）。還有更多這樣的庫，但這兩個是最常見的。他們都有自己的優點和缺點，在決定之前你可能會對每個人做一些研究。您也可以在SO上籤出[tag：redux]和[tag：mobx]。祝你好運！ – Chris

正如Chris所說，你可以嘗試使用Flux，Redux或MobX來處理數據流量較大的場景。 –

@Chris - 感謝您對我的想法進行驗證。我猜兩層不是很糟糕，但肯定會讓我更加認真地維護自己的狀態（這就是爲什麼我喜歡與反應合作的原因）。最後一個問題，你最好把最新的用戶推到我的用戶數組中嗎？或者我應該再次返回所有用戶並重置我的狀態？ – scapegoat17

在React中傳遞迴調是常見的，兩層甚至三層都不例外。然而，當傳遞迴調時樹會變得單調乏味，或者讓事情難以跟蹤，那麼使用外部狀態來存儲數據是一個好主意。狀態可以在項目中的所有組件之間共享，而不需要具有特定的結構或傳遞數據來使其工作。

This article可能會幫助你理解當你遇到「遇到困難」時保持本地組件狀態增加太多複雜度並且容易出錯。（它大約是redux，但我認爲在使用其他狀態管理庫（如MobX）時也可以引用它，因爲它們試圖解決相同的問題）

來源

2017-09-05 17:55:48 Tomasz

如何使用React正確更新父組件

回答

相關問題