使用 react 组件访问 express post 方法

Question

基本上，我正在创建一个电子邮件表单，其中包含服务器的视图和表达方式。它工作正常。

我只想在联系页面上重新呈现表单组件，而不是成功重定向。

无论如何我可以从反应组件中访问发布请求成功值吗？也许调用在“/contact”端点获取的联系人组件中的 fetch 方法？这会触发我 express.js 文件中的 app.post() 方法吗？？

这是我在 react 中提交按钮的帖子请求：

handleFormSubmit = (name, email, text) => {

  axios.post('/contact', {
   name: name,
   email: email,
   text: text
  }).then(res => {
   this.setState({sent: true})
   console.log(this.state);
  }).catch(err => {
   console.log(err);
  })
}

这是我的快速 js 帖子：

server.post('/contact', async (req, res) => {
  try {
    sendMail(req.body).then(info => console.log(info))

    // I am getting a response here just fine
    console.log(res)

  } catch (error) {
    console.log('express line 25: ', error);
  }

});

我将 Next.js 和 nodemailer 与 GMail 一起使用

谢谢

Answer 1

好吧，对不起，问题与任何代码无关，它的下一个 js 设置，我构建并运行，似乎返回正常！

Answer 2

我没有看到您的代码，但如果我们在 React 组件中使用 fetch，请尝试使用 componentDidMount：

class Contact extends React.Component {
  constructor(props) {
      super(props);
      this.state = {data: null, isLoading: true}; 
  }

  // from the server 
  componentDidMount() {
      fetch('/contact').then( response =>  response.json()
      ).then( data => {
          this.setState({data, isLoading: false}); // es6 syntax same as this.setState({data: data, isLoading: false})
      }).catch( err => {
          throw new Error(err);
      });
  }

  render() {
     const {data, isLoading} = this.state;  
     if(isLoading){return (<div>Loading...</div>)} //no data fetched in  the initial render 
      return (
          <div>
            {data}
          </div> 
     );
  }
}

希望对您有所帮助。