Перенаправить компонент React при отправке формы экспресс

Question

Я пытаюсь перенаправить на React Component при отправке формы с экспресс. Это мой код:

Express.js

app.use(bodyParser.urlencoded({extended: true}))

app.use(express.static(publicPath));

app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'))
})

app.post('/charge', (req, res) => {

    const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)

    stripe.charges.create({
        amount: req.body.totalAmount * 100,
        currency: 'eur',
        source: req.body.stripeToken,
        description: "Example charge",
        receipt_email: req.body.receiptEmail
    }).then((charge) => {
        console.log(req.body)
    }).catch((err) => {
        console.log(err)
    })

CheckoutForm.js

    handleSubmit = (e) => {
            e.preventDefault()

            this.props.stripe.createToken({ name: this.state.name }).then(({ token }) => {
                console.log(token)
                this.stripeTokenHandler(token)
            }) 


        }

        stripeTokenHandler = (token) => {
            const form = document.getElementById('form')

            const hiddenInput = document.createElement('input')
            hiddenInput.setAttribute('type', 'hidden')
            hiddenInput.setAttribute('name', 'stripeToken')
            hiddenInput.setAttribute('value', token.id)

            form.appendChild(hiddenInput)
            form.submit()       
        }

render() {
        return (
            <div className="payment-container">    
                <form id="form" className="checkout-form" onSubmit={this.onSubmit}>

                    <label>
                        Card Number
                        <CardNumberElement
                            onChange={this.onChange}
                            style={{ base: { color: 'white' } }}
                        />
                    </label>
                    <label>
                        Titular Name
                        <input
                            type="text"
                            value={this.state.name}
                            onChange={this.handleText}
                            className="input-text"
                            placeholder="Full Name"
                        />
                    </label>
                    <label>
                        Expiration Date
                        <CardExpiryElement style={{base: {color: 'white'}}} />
                    </label>
                    <label>
                        CVC
                        <CardCVCElement style={{base: {color: 'white'}}} />
                    </label>
                    <label>
                        Email
                        <input
                            type="text"
                            value={this.state.email}
                            onChange={this.handleEmail}
                            className="input-text"
                            name="receiptEmail"
                            placeholder="Email"
                        />
                    </label>
                    <button className="btn-buy">Pay now</button>
                </form>
            </div>
        )}
}

Форма отправлена ​​правильно и зарегистрируйте платеж. Когда я представил сейчас, получает тело запроса. Как перенаправить компонент с помощью формы запроса?

Answer 1

Если вам нужно перенаправить ваш компонент после нажатия кнопки "Оплатить сейчас", то я предлагаю вам изменить <button> к <Link> компонент с использованием React Router.

Это будет выглядеть так

<Link to='/charge' className='btn-buy' onClick={this.formSubmit}>Pay Now</Link>

Затем просто удалите this.formSubmit из самой формы, так как теперь на кнопке. Он будет перенаправлять и отправлять.

Если вы хотите дождаться перенаправления после получения ответа, то в вашем formSubmit функция, после получения ответа от сервера вы можете использовать this.props.history.push('/charge') в то then часть вашего отправителя формы.

Имейте в виду, вам нужно будет import { Link } from 'react-router-dom' за это.

Надеюсь, поможет!

Answer 2

Другой способ справиться с этим - использовать Redirect компонент от React Router. Что-то вроде этого:

// in the route, if the post was successful
res.json({data: 'whatever data you want', success: true})
// and if it was unsuccessful
res.json({success: false})

И вот действительно урезанный компонент реагирования, чтобы пойти с ним:

class FormComponent extends Component {
  constructor() {
    super();
    this.state = {
      // inputs or whatever
      success: true,
    }
    this.handleFormSubmit = this.handleFormSubmit.bind(this)
  }

  handleFormSubmit(e) {
    e.preventDefault();
    fetch('send the data', { with: 'some options' })
      .then(res => res.json())
      .then(jsonRes => {
        const { success } = jsonRes;
        this.setState({ success });
      })
      .catch(err => console.log(err))
  }

  // assorted other stuff to handle inputs or whatever

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          {/* inputs or whatever */}
        </form>
        {this.state.success && <Redirect push to='/some-other-url' />}
      </div>
    )
  }
}

Если this.state.success оценивает true, редирект будет отображаться; иначе это не будет вообще.

Это позволяет убедиться, что запрос был успешным, прежде чем перенаправить на другую страницу. Это также позволяет вам дать пользователю сообщение об ошибке, сделать что-то с тем или иным ответом, и т. Д. И т. Д. Может быть, вам нужно будет переместить состояние и так далее вверх по дереву компонентов, чтобы больше компонентов имели доступ к данным ответа, если это то, что им нужно.