The child component cannot read the asynchronous data / Cannot read property of undefined requested by the parent component by Synchronize

when the parent component asynchronously obtains the data and passes it to the child component, but when the child component calls the data, it finds that the asynchronous data has not yet returned a result, and a undefined error is reported. Is there any solution

the reason for the analysis should be that when the child component accesses the props data, the asynchronous data of the parent component has not yet been returned, is it?

The code for

is roughly as follows.

class ParentComponent extends React.Component {
    constructor () {
        // initial
    }
    
    componentDidMount () {
        fetch("url").then(data => {
            this.setState({
                data: data,
            );
        })
    }
    
    render () {
        renturn(
         <ChildComponent data={this.state.data} />
        );
    }
        
}

class ChildComponent extends React.Component {
    constructor () {
        // initial
    }
    
    render () {
        let { dataItem } = this.props.data; // Err: Cannot read property of undefined
        console.log(this.props.data); // log empty arr first, then log full data /  
    }
}

Thank you.

Feb.27,2021

is processed by Promise .

Menu