Question

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

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

无论如何，我可以从react组件中访问post请求成功值吗？也许在联系人组件中调用一个在'/ contact'端点获取的fetch方法？这会触发我的express.js文件中的app.post（）方法吗？

这是我在反应中按钮提交的发布请求：

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

这是我的快递帖子：

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

});

我正在使用带有GMail的Next.js和nodemailer

由于

Answer 1

我没有看到您的代码，但如果我们在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> 
     );
  }
}

希望这会对你有所帮助。

Answer 2

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

使用react组件访问express post方法

2 个答案: