Question

大家好。

我对这段代码有疑问：

这是2个功能：

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

我在2个地方调用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 />;
  }
}

Answer 2

按现状，renderModal()调用将永远不会注册，因为一旦返回响应，您将返回它。

您需要的是这样的

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

在异步函数

2 个答案: