我会设置它，以便您依靠全局状态变量来告诉您的组件何时呈现。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 调用完成之前不会呈现整个孙子网格，那么您将不得不使用完全不同的解决方案。在这种情况下，您的孙子必须从一开始就渲染以进行调用，但是有一个带有 的 css 类display: none，该类仅在全局状态变量loading标记为 false后才会更改。这也是可行的，但有点不符合 React 的观点。
