如何延遲父組件的渲染直到子組件中的 setState 完成？

Question

**parent-component**

    class MatchVideos extends Component {
        DaySelector = createRef();  //creating ref for child-component

        componentDidMount() {

            utils.getData().then((response) => {

            this.setState({ dayData: response.data }, () => {
                 this.getData(this.DaySelector.current.state.currentDay);  //calling a method in parent by passing child-component data
            });

            })
            .catch(err => {
               if (err.response) {
               this.setState({ isError: true })
               }
            })
       }

    render(){
       return(
       <DaySelector ref={this.DaySelector}/>
       )
    }
    }

**child-component(DaySelector)**

componentDidMount(){
        let data = {
            "trn_year": utils.trn_year,
            "trn_id": utils.trn_id
        }
        utils.getDay(data).then((response) =>{
            this.dates = response.data.dayWise;
            var curDay = this.dates.filter(function(day) {
                console.log(new Date().toISOString().split('T')[0]);
                return( day.Date === "2019-01-19"
            )
            })
            this.setState({currentDay: curDay[0].Day, selectedDay: curDay[0].Day}, ()=>{  //this is the state I want to access in parent-component.
                utils.selected_day = this.state.selectedDay;
                utils.selected_date = curDay[0].Date;
            });                          
        })
    }

所以我們知道只有在所有子組件的 componentDidMount 方法都執行后才會執行 parent 的 componentDidMount。 但我的問題是父方法中 Dayselector 的 ref 為空（當前：null）的五分之一。 如您所見，我在父組件中使用子組件（日選擇器）的狀態。 我認為問題是子方法中的 setState 需要一些時間，同時父方法以空值執行。 如何解決這個問題？ 如果我的問題錯了或完全離題，請糾正我。 我所需要的只是在子組件中有數據后父組件應該呈現。

我只展示了理解我的問題所需的代碼

Answer 1

嘿 React 有這些很酷的東西叫做React lazy和React Suspense

對於用法，您可以查看來自Siddharth Kshetrapal 的這個很酷的視頻視頻