在反应

Question

我一直在浏览很多有关此主题的堆栈溢出问题，但我仍然没有得到它... 我尝试使用此解决方案很好地回答了我的问题：https://stackoverflow.com/a/42601915/2617419

这就是我所拥有的：

class EnterpriseContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {hit: props.hit};
    }

    async componentDidMount() {
        if (this.state.hit === undefined) {
            let h = await getObjectIDAsync();
            this.setState({hit: h});
        } else {
        }
    }

    render() {
        return (
            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
                <Paper className="paper" elevation={1} style={{'paddingLeft': '0px'}}>

                    <Grid
                        container
                    >
                        <EnterpriseLogo image={this.state.hit.image}/>
                        <EnterpriseInfo hit={this.state.hit}/>
                    </Grid>
                </Paper>
            </Grid>
        );
    }
}

我知道这个逻辑首先加载react组件，然后异步地将数据加载到其中。 如果我只是将命中对象作为stringify对象（使用JSON.stringify(hit)）加载到我的组件中，它可以正常工作。 但是组件EnterpriseLogo和EnterpriseInfo使用hit道具引用例如props.hit.objectID，它会使应用程序崩溃，因为此引用尚未存在。< / p>

我认为我在某处遇到了设计问题，但我不确定该去哪里。

Answer 1

回答自己， 使用子组件所需的所有道具初始化state.hit解决了这个问题。