いつレンダリングするかをコンポーネントに通知するためにグローバル状態変数に依存するように設定します。Reduxは、多くのコンポーネントが相互に通信しているこのシナリオに適しています。コメントで、それを時々使用すると述べました。そこで、Reduxを使用して答えをスケッチします。
API呼び出しを親コンテナに移動する必要がありますComponent A。API呼び出しが完了した後で孫をレンダリングしたい場合、それらのAPI呼び出しを孫自体に保持することはできません。まだ存在しないコンポーネントからAPI呼び出しを行うにはどうすればよいですか？
すべてのAPI呼び出しが行われると、アクションを使用して、一連のデータオブジェクトを含むグローバル状態変数を更新できます。データが受信される（またはエラーがキャッチされる）たびに、アクションをディスパッチして、データオブジェクトが完全に入力されているかどうかを確認できます。完全に入力したら、loading変数をfalseに更新して、Gridコンポーネントを条件付きでレンダリングできます。
だから例えば：
// Component A
import { acceptData, catchError } from '../actions'
class ComponentA extends React.Component{
componentDidMount () {
fetch('yoururl.com/data')
.then( response => response.json() )
// send your data to the global state data array
.then( data => this.props.acceptData(data, grandChildNumber) )
.catch( error => this.props.catchError(error, grandChildNumber) )
// make all your fetch calls here
}
// Conditionally render your Loading or Grid based on the global state variable 'loading'
render() {
return (
{ this.props.loading && <Loading /> }
{ !this.props.loading && <Grid /> }
)
}
}
const mapStateToProps = state => ({ loading: state.loading })
const mapDispatchToProps = dispatch => ({
acceptData: data => dispatch( acceptData( data, number ) )
catchError: error=> dispatch( catchError( error, number) )
})
// Grid - not much going on here...
render () {
return (
<div className="Grid">
<GrandChild1 number={1} />
<GrandChild2 number={2} />
<GrandChild3 number={3} />
...
// Or render the granchildren from an array with a .map, or something similar
</div>
)
}
// Grandchild
// Conditionally render either an error or your data, depending on what came back from fetch
render () {
return (
{ !this.props.data[this.props.number].error && <Your Content Here /> }
{ this.props.data[this.props.number].error && <Your Error Here /> }
)
}
const mapStateToProps = state => ({ data: state.data })
あなたのレデューサーは、すべてがまだ準備ができているかどうかを言うグローバル状態オブジェクトを保持します
// reducers.js
const initialState = {
data: [{},{},{},{}...], // 9 empty objects
loading: true
}
const reducers = (state = initialState, action) {
switch(action.type){
case RECIEVE_SOME_DATA:
return {
...state,
data: action.data
}
case RECIEVE_ERROR:
return {
...state,
data: action.data
}
case STOP_LOADING:
return {
...state,
loading: false
}
}
}
あなたの行動で：
export const acceptData = (data, number) => {
// First revise your data array to have the new data in the right place
const updatedData = data
updatedData[number] = data
// Now check to see if all your data objects are populated
// and update your loading state:
dispatch( checkAllData() )
return {
type: RECIEVE_SOME_DATA,
data: updatedData,
}
}
// error checking - because you want your stuff to render even if one of your api calls
// catches an error
export const catchError(error, number) {
// First revise your data array to have the error in the right place
const updatedData = data
updatedData[number].error = error
// Now check to see if all your data objects are populated
// and update your loading state:
dispatch( checkAllData() )
return {
type: RECIEVE_ERROR,
data: updatedData,
}
}
export const checkAllData() {
// Check that every data object has something in it
if ( // fancy footwork to check each object in the data array and see if its empty or not
store.getState().data.every( dataSet =>
Object.entries(dataSet).length === 0 && dataSet.constructor === Object ) ) {
return {
type: STOP_LOADING
}
}
}
さておき
API呼び出しが各孫の中に存在するという考えに本当に結婚しているが、孫のグリッド全体がすべてのAPI呼び出しが完了するまでレンダリングされない場合、完全に異なるソリューションを使用する必要があります。この場合、孫は呼び出しを行うために最初からレンダリングする必要がありますがdisplay: none、グローバル状態変数loadingがfalseとしてマークされた後にのみ変更されるを含むcssクラスが必要です。これも実行可能ですが、Reactのポイント以外にも、ある程度のことです。
