Question

我有一个Express / React应用程序（从来没有达到过。），该应用程序应允许用户从数据库中取出x笔的钱。

为此，我有一个抽签页面，其中包含一堆都是提交按钮的按钮，它们包含一些值，并且在按下该值时，应该从数据库中减去和。如果我在变量中发送硬编码的值，但在尝试从表单发送数据时却不能，则我的代码工作正常。

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;

在后端，我正在控制器中的一个文件中处理此问题，并使用server.js中的express router调用api点

后端处理：

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

变量未从Axios发送到React中的API点

1 个答案: