React.js和Stripe：在提交时显示成功和错误消息

Question

我正在使用Reactjs上的Stripe开发支付系统。 我希望能够显示成功或错误消息，但是我还是React的新手，我不确定应该将代码放在哪里。 成功消息：用于支付成功的时间。 错误消息：如果付款有问题。

创建令牌后，我还想显示他们作为响应收到的激活码。像这样： {this.state.code &&您的激活码（ code ）为：{this.state.code}，有效期为{this.state.subscription_days}天。

但这不起作用。

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false,
      referrer: '',
      email: '',
      amount: '',
    };
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {
    console.log(this.props);
    let referrer = this.props.match.params.referrer; // url - added route to index.js
    if (referrer) {
      console.log(referrer);
      this.setState({ referrer, });
    }

    // let amount = this.state.amount;
    // document.getElementById('get3months').addEventListener('click', amount._handleAmount);
  }

  // user clicked submit
  submit(ev) {
    ev.preventDefault(); // prevent default submission and refreshing the page
    this.props.stripe.createToken() // which elements to tokenize
      .then(response => {
        console.log('Received Stripe token:', response.token);
        axios.post('http://10.250.57.37:8000/subscriptions/codes/pay/',
          {
            token: response.token,
            amount: this.state.amount,
            email: this.state.email,
            referrer: this.state.referrer, // rn name or empty string, filip
          },
          {
            'Content-Type': 'application/json', // header
          }
        )
        .then(response => {
          console.log(response);
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    if (this.state.complete) return <p>Purchase Complete!</p>;

    return (
      <div className="checkout-form">
        <PrimeHeading
          heading={this.props.heading}
          subheading={this.props.subheading}
        />
        <p>Would you like to complete the purchase?</p>
        <form onSubmit={this.submit} style={{ minHeight: 300, }}>
          <label>
            Email
            <input
              id="email"
              name="email"
              type="email"
              placeholder="Enter your email"
              required
              onChange={this._handleEmailChange.bind(this)}
              value={this.state.email}
            />
          </label>
          {/* <label>
            Referral
            <input
              id="referrer"
              name="referrer"
              type="text"
              placeholder="Enter your friends' usernames"
              required
            />
          </label> */}
          <CheckoutCardSection />
          <Button
            // label="Pay" {this.state.amount} "DKK"
            onClick={this.submit}
            type="button"
            size="medium"
            backgroundColor="#43ddb1"
            color="white"
            noShadow
          />
        </form>
        {this.state.code && <div>Your activation code is: {this.state.code} and it is valid for {this.state.subscription_days} days.</div>}
      </div>
    );
  }

  _handleEmailChange(event) {
    let email = event.target.value;
    this.setState({ email, });
  }
}

如果您需要更多说明，请告诉我。非常感谢您的帮助！

Answer 1

在显示的代码中，应在then或catch回调中设置新状态。您可以在组件的状态中具有一些额外的属性来实现此目的。

...
this.state = {
      complete: false,
      referrer: '',
      email: '',
      amount: '',
      code: null,
      subscription_days: null,
      error: null,
    };
...

然后，您将其设置如下：

  ...
  .then(response => {
      console.log('Received Stripe token:', response.token);
      axios.post('http://10.250.57.37:8000/subscriptions/codes/pay/',
      {
        token: response.token,
        amount: this.state.amount,
        email: this.state.email,
        referrer: this.state.referrer, // rn name or empty string, filip
      },
      {
        'Content-Type': 'application/json', // header
      }
    )
    // Use the appropiate property in your response to set the values.
    // Note that I'm using destructuring assignment
    .then(({ code, subscription_days })=> {
      this.setState({
        code,
        subscription_days
      });
    });
  })
  .catch(error => {
    this.setState({
      error: `Your error message.`//Maybe error.message?
    });
  });
  ...

最后，建议将您的网络调用代码从组件中拉出到单独的模块中，然后返回响应。这样会使您的组件代码更具可读性。