Переменная не отправляется из Axios в точку API в реакции

Question

У меня есть приложение Express / React (никогда не доходить до прод.), Которое должно позволить пользователям вынимать x-сумму денег из базы данных.

Для этого у меня есть страница whidrawal с кучей кнопок, которые все являются кнопками отправки, они содержат некоторое значение, и при нажатии значения эта сумма должна быть вычтена из базы данных. Мой код работает нормально, если я отправляю жестко закодированные значения в переменных, но не при попытке отправить данные из формы.

Журнал консоли в серверной части для req.body console.log('req.body is: ', req.body); возвращает [0] req.body is: { amount: '', serverCardNumber: '666' }, при жесткой настройке все работает.

Это мой код реакции:

import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import axios from 'axios';
import { Link } from 'react-router-dom';

class WithdrawalForm extends React.Component {
  constructor() {
    super();
    this.state = {
      amount: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onClick = () => {
    this.setState({
      amount: this.state.amount
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { amount } = this.state;

    // get our form data out of state
    const serverCardNumber = sessionStorage.getItem('cardnumber');

    axios({
      method: 'post',
      url: '/api/whidrawal',
      data: {
        amount,
        serverCardNumber
      }
    });
  };

  render() {
    const { amount } = this.state;
    return (
      <React.Fragment>
        <CssBaseline /> {/*https://material-ui.com/style/css-baseline */}
        <h1>How much do you want to withdraw?</h1>
        <form onSubmit={this.handleSubmit} method="POST" action="/api/whidrawaly">
          <br />
          {/* Bytt ut med CSS block elementer eller wwnoe slikt, bytt name på form fields til å hentes via JS  */}
          <br />
          <div className="container">
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="200"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">200 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="300"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">300 NOK</div>
            </Button>
            <br />
            <br />
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="400"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">400 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="500"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">500 NOK</div>
            </Button>
            <br />
            <br />
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="700"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test"> 700 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="1000"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">1000 NOK</div>
            </Button>
          </div>
          <br />
          <br />
          <div className="marginTop">
            <Button variant="contained" color="secondary" className="Knapp">
              <Link to="/otheramount" className="test">
                Other amount
              </Link>
            </Button>
          </div>
          <br />
          <br />
        </form>
      </React.Fragment>
    );
  }
}
export default WithdrawalForm;

В моем бэкэнде я обрабатываю это в файле на моем контроллере и вызываю точку API с помощью экспресс-маршрутизатора в server.js

обработка на стороне:

const connection = require('../models/loginrouters');
const express = require('express');
const router = express.Router();
const takeMoney = require('../models/whidrawalDb');

router.post('/', function(req, res) {
  console.log('req.body is: ', req.body);
  console.log(req.body.amount);
  console.log(req.body.cardnumber);
  const amount = req.body.amount;
  const cardnumber = req.body.serverCardNumber;

  takeMoney(amount, cardnumber);
});

module.exports = router;

По какой-то причине сумма не отправляется с кнопок в состояние, и, следовательно, не отправляется на сервер. Но я не могу понять, почему, какие-либо идеи?

Answer 1

Вы устанавливаете сумму к существующей сумме, которая является пустой строкой при каждом клике.

this.setState({
  amount: this.state.amount    // same value every time
});

Если вы хотите другое значение, вы должны передать значение в обратный вызов. Вот пример создания обратного вызова для каждой конкретной суммы за кнопку.

setAmount = (amount) => {
    return (event) => {
        this.setState({ amount }) 
    }
}

Пример использования:

<button onClick={this.setAmount(700)} />