在Reactjs中使用fetch处理ajax请求时出错。

我正试图在我的组件中为一个POST请求做一些错误处理。由于某些原因,下面的内容没有显示警报。有什么好办法吗?

到目前为止的代码。

import React, { Component } from 'react';

class Contact extends Component {
 constructor(props) {
    super(props);
    this.state = {
    message: '',
    email: '', 
    loading: false,
    successMessage: ''
    };
  }

handleSubmit(e) {
    e.preventDefault();
  /*global fetch */
    fetch('https://xxxxxxxxxx.execute-api.eu-west-2.amazonaws.com/xxx',{
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      }).then(
        (response) => (response.json())
       ).then((response)=>{

       if (response.status === 'success'){
        alert("Message Sent."); 
        this.resetForm();
      }else if(response.status === 'fail'){
        alert("Message failed to send.");
      }
     /*    
     if (response.ok) {
      this.setState({ successMessage: true});
     }
     */
    });
  }

  onEmailChange(event) {
    this.setState({email: event.target.value});
  }

  onMessageChange(event) {
    this.setState({message: event.target.value});
  }


  render() {
    return (
      <div className="container mt-5">
      <h3>Contact</h3>
      <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
    <div className="form-group mt-4">
        <label htmlFor="exampleInputEmail1">Email address</label>
        <input type="email" className="form-control" required aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
    </div>
    <div className="form-group">
        <label htmlFor="message">Message</label>
        <textarea className="form-control" rows="5" required value={this.state.message} onChange={this.onMessageChange.bind(this)} />
    </div>
    <button type="submit" className="btn btn-primary">Submit</button>
    { this.state.successMessage &&
      <div className="alert alert-success mt-5" role="alert">
  Your message has been successfully sent. Thanks for your message!
</div> }
    </form>
      </div>
    );
  }
}
export default Contact;

解决方案:

if (response.status === 200){
        alert("Message Sent."); 
        this.resetForm();
      }else
        alert("Message failed to send.");
      }

fetch成功时返回200,而不是 success

给TA打赏
共{{data.count}}人
人已打赏
未分类

divs在容器div中的水平排列不稳定。

2022-9-8 14:29:45

未分类

在gcc中,是否可以避免在堆栈初始化中从其他部分复制?

2022-9-8 14:40:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索