在异步函数中调用函数（呈现组件）

Question

Good day everyone.

I have problem with this piece of code:

It's 2 function:

1. renderModal() - it's responsible for rendering ModalSuccess at the moment where data sucesfully will be added to databbase (to inform user about correctly fill form.

Component ModalSuccess when call it's render modal.

2. submitToServer - it's sending all data from redux-form to API.

In end of try , i trying call function renderModal.

How can i make it correctly?

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

---

I call submitTo server in 2 places:

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

I think you can restructure your code a bit better. Instead of returning the modal you can just mount the modal once and control its visibility leveraging the state.

Take a look at how I think your component should be structured.

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

Answer 2

As it stands your renderModal() invocation will never register since you are returning once the response it has been returned.

What you'd need to is something like this:

let responseJson = await response.json();
if (responseJson) {
  renderModal();
}