如何在 React 中呈现未定义状态的数据？

我正在 componentDidMount 内获取数据，但在初始渲染期间我未定义，然后再次渲染发生，并且在此期间状态变量被填充。现在，当它不是未定义的并且在填充之后，我想对其进行解构并在我的组件内显示数据。

注意：getProjectDetails() 发出 GET 请求来填充数据。

我收到未定义的打字机错误名称。

  constructor(props) {
            super(props);
            this.state = {
               projectDetails: ''
            };
        }

    componentDidMount() {
            getProjectDetails(this.props.logged_in_user, this.props.projectId)
                .then( res => {
                    this.setState({projectDetails: res});
                })
                .catch(err => {
                    console.log('Error: ' + err);
                })
        }

    //Inside render()

    render() {
            console.log('Project details from API endpoint: ', this.state.projectDetails.project)

            const { projectDetails } = this.state;
            console.log('Destructure: ', projectDetails);

            const project = this.state.projectDetails.project;

    let {  
                name,
                location,
                city,
                builder_name } = project;

如果状态已设置，您可以检查以下内容：

render() {
    if(this.state.projectDetails === ''){
        return <div>Loading</div>;
    }
    else{
        return <div>{this.state.projectDetails.project}</div>
    }
}

所以只要state为false，就会返回Loading，如果有值，那么this.state.projectDetails.project被返回。我希望这有帮助。

Edit:render 方法将被调用两次，一次是在获取数据之前，一次是在设置状态之后。因此，如果确实设置了数据，则只会返回数据。