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>
    }
}

只要状态为假，就将返回加载，如果有值，则返回this.state.projectDetails.project。希望对您有所帮助。

编辑： 在获取数据之前，然后在设置状态之后，将两次调用render方法。因此，这只会返回数据（如果已真正设置）。

如何使数据以反应状态变为未定义状态？

1 个答案: