javascript - 在异步函数中调用函数(渲染组件)

Question

大家好。

我对这段代码有疑问:

它有两个功能:

1.renderModal() - 它负责在数据成功添加到数据库时渲染 ModalSuccess (以通知用户正确填写表单。

组件 ModalSuccess 当调用它的渲染模式时。

2.submitToServer - 它将所有数据从 redux-form 发送到 API。

在尝试结束时，我尝试调用函数renderModal。

如何正确制作？

function renderModal() {
  return (
    <div>
      <ModalSuccess/>
    </div>
  );
}

//async function send to server
export async function submitToServer(values) {

  //FUND
   try {
    let response = await fetch('endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...authHeader()
      },
      body: JSON.stringify(values),

    });

    let responseJson = await response.json();
    return responseJson;

    renderModal();

  } catch (error) {
    console.error(error);
  }

<小时/>

我在两个地方调用submitTo服务器:

1.

export var submit =(values) =>{

          let isError =false;

          if (isError) {
            //  throw new SumissionError(error);
          } else{
            return submitToServer(values)
              .then(data =>{
                  if (data.errors)  {
                    console.log(data.errors);
                      throw new SubmissionError(data.errors);
                  } else{
                      console.log(values)
                      console.log('server added data to database');
                  }
              });
          }
}

2.

<form onSubmit={handleSubmit(submitToServer)}>

Answer 1

我认为你可以更好地重构你的代码。您只需安装一次模态并利用状态控制其可见性，而不是返回模态。

看看我认为您的组件应该如何构建。

class Comp extends React.Component {
  state = {
    isOpen: false
  };
  submitToServer = async values => {
    try {
      let response = await fetch("endpoint", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...authHeader()
        },
        body: JSON.stringify(values)
      });

      let responseJson = await response.json();
      this.setState({ isOpen: true });
      return responseJson;
    } catch (error) {
      console.error(error);
    }
  };
  render() {
    /* your component */
    <ModalSuccess isOpen />;
  }
}