哪裏是最好的地方加載數據從零售店？

Question

我在我的父React組件中使用componentDidMount（）方法從API中獲取一些數據，然後將其保存在redux狀態。

在我的渲染方法中，我有另一個組件應該使用來自全局的redux狀態的數據。

我可以通過道具發送數據給我的子組件，或者我可以使用mapStateToProps（）加載它們。

如果我嘗試console.log或從我的子組件構造函數或componentDidMount（）方法中的道具分配數據到VAR，我沒有得到我所期望的數據（我得到初始狀態）。

我的渲​​染方法中的Console.log會在第一次渲染時向我顯示初始狀態，第二次它會顯示正確的數據。

我需要點，我確信我有正確的數據。

...其中var a = this.props.somethingFromState;將被正確分配。

渲染方法是最好的地方，通常做這個的最佳實踐是什麼。謝謝。

Answer 1

這裏有幾個問題。

關於何處加載數據，componentDidMount確實是調用ajax方法並加載數據的正確位置，正如facebook docs所建議的。

關於是否通過道具將數據傳遞給子組件，我喜歡遵循presentational vs container components的Dan Abramov's（作者ofredx）guid。簡而言之，嘗試使用一個容器組件加載數據並執行所有邏輯，然後通過道具將所需的任何內容傳遞給表示組件，如果可能的話，使它們成爲純函數。

就您何時擁有正確的數據而言，請查看上面的React生命週期文檔。您將看到constructor觸發，然後componentWillMount，然後render，然後componentDidMount。因此，如果您的ajax調用獲取了componentDidMount中的數據，您將首先調用render，導致沒有數據被加載到已安裝的組件上。大多數人通過使用微調器來解決這個問題，直到數據從ajax加載完成。一個簡單的if語句應該完成這個