Question

我有一个父组件，在其中我可以使用refs来调用子组件中的函数。

Child组件函数具有this.setState和this.setState中的回调函数。

handleSaveProject = async () => {
    this.setState({
            //set some state
        }, () => {
            if(this.state.isValid){
                let project = this.initializeProject();
                return ProjectAPI.saveProject(project).then((response) => {
                    console.log(response); //ok
                    return response;
                });
            }
        }
    );
}

这很好。现在，从父组件中，我使用引用进行调用。

 handleSaveClick = () => {
        if(createProjectComponentRef.current){
            createProjectComponentRef.current.handleSaveProject().then((saveResponse) => {
                console.log(saveResponse); //undefined
                if(saveResponse && saveResponse.status === 200){
                    this.handleDialog();
                    ProjectAPI.getProjects().then((response) => {
                        this.setState({projects: response})
                    });
                }
            });
        }
    }

我可以调用Child组件函数，但是在Parent组件中得到的响应（返回值）是不确定的。请帮忙吗？

Answer 1

handleSaveProject实际上没有返回任何内容，我也不认为setState也没有返回任何内容。

您需要在此处执行类似答案的操作：React setState callback return value

return new Promise(resolve => {
   this.setState({
        //set some state
    }, () => {
        if(this.state.isValid){
            let project = this.initializeProject();
            return ProjectAPI.saveProject(project).then((response) => {
                console.log(response); //ok
                resolve(response);
            });
          }
     }
   );
)};

从setState回调返回

1 个答案: