如何在获得未定义状态的反应中呈现数据？

Question

我在 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;

Answer 1

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

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

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

编辑： render 方法将被调用两次，在获取数据之前，然后在设置状态之后。所以这只会返回数据，如果它真的设置了。