UnhandledPromiseRejectionWarning：TypeError：无法读取未定义的属性“数量”

Question

我正在连接 Stripe 支付系统的 ExpressJS 部分。 我想动态传递一些属性，例如amount和description 。

我有代表产品的这三个不同的组件： <SunnySampler /> 、 <Grasses />和<HalfPound /> 。

在它们中，我像这样传递amount和description道具： <Grasses amount={1500} description="Tray" /> 。

然后在我的StripCheckout组件上，我将属性中的数量和描述传递给上述组件。 我还将amount和description传递给handleToken function：

import React, { Component } from "react";
import StripeCheckout from "react-stripe-checkout";
import { connect } from "react-redux";
import * as actions from "../actions";

class SunnySampler extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          name='Microurb Farms'
          description={this.props.description}
          amount={this.props.amount}
          shippingAddress
          billingAddress={false}
          zipCode={true}
          token={(token) =>
            this.props.handleToken(
              token,
              this.props.amount,
              this.props.description
            )
          }
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

export default connect(null, actions)(SunnySampler);

这是我的动作创建者的样子：

export const handleToken = (token, amount, description) => async (dispatch) => {
  const res = await axios.post("/api/stripe", { token, amount, description });

  dispatch({ type: FETCH_USER, payload: res.data });
};

那是客户端，现在在服务器端我有一个billingRoute.js文件，如下所示：

const keys = require("../config/keys");
const stripe = require("stripe")(keys.stripeSecretKey);

module.exports = (app) => {
  app.post("/api/stripe", async (req, res) => {
    // const token = req.body.data.token;
    const amount = req.body.data.amount;
    const description = req.body.data.description;
    const charge = await stripe.charges.create({
      amount: amount,
      currency: "usd",
      description: description,
      source: req.body.id,
    });

    console.log(charge);
  });
};

不幸的是，我在终端中收到以下错误：

（节点：99567）UnhandledPromiseRejectionWarning：TypeError：无法在 /Projects/NodeCRA/routes/billingRoutes.js:7:34 [0] 处读取未定义 [0] 的属性“数量”
在 Layer.handle [as handle_request] (/Projects/NodeCRA/node_modules/express/lib/router/layer.js:95:5) [0] 在下一个 (/Projects/NodeCRA/node_modules/express/lib/router/route .js:137:13) [0] 在 Route.dispatch (/Projects/NodeCRA/node_modules/express/lib/router/route.js:112:3) [0] 在 Layer.handle [as handle_request] (/Projects /NodeCRA/node_modules/express/lib/router/layer.js:95:5) [0] 在 /Projects/NodeCRA/node_modules/express/lib/router/index.js:281:22 [0] 在 Function.process_params (/Projects/NodeCRA/node_modules/express/lib/router/index.js:335:12) [0] 在下一个 (/Projects/NodeCRA/node_modules/express/lib/router/index.js:275:10) [ 0] 在 SessionStrategy.strategy.pass (/Projects/NodeCRA/node_modules/passport/lib/middleware/authenticate.js:343:9) [0] 在 /Projects/NodeCRA/node_modules/passport/lib/strategies/session.js :69:12 [0] 通过 (/Projects/NodeCRA/node_modules/passport/lib/authenticator.js:337:31) [0] 在反序列化 (/Projects/NodeCRA/node_modules/passport/lib/aut henticator.js:349:7) [0] 在 /Projects/NodeCRA/services/passport.js:14:5 [0]
在 processTicksAndRejections (internal/process/task_queues.js:97:5) [0] （使用node --trace-warnings...显示警告的创建位置）

我认为可能需要将token 、 amount和description作为属性传递给动作创建器内部的data object ，但这给了我一个语法错误。

Answer 1

解构最终解决了这里的错误，并将amount传递给了handleToken内部的箭头 function ：

import React, { Component } from "react";
import StripeCheckout from "react-stripe-checkout";
import { connect } from "react-redux";
import * as actions from "../actions";

class SunnySampler extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          name='Microurb Farms'
          description={this.props.description}
          amount={this.props.amount}
          shippingAddress
          billingAddress={false}
          zipCode={true}
          token={(token, amount, description) =>
            this.props.handleToken(
              token,
              this.props.amount,
              this.props.description
            )
          }
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

export default connect(null, actions)(SunnySampler);

这是我的billingsRoute.js中的解构部分：

const keys = require("../config/keys");
const stripe = require("stripe")(keys.stripeSecretKey);

module.exports = (app) => {
  app.post("/api/stripe", async (req, res) => {
    const { amount, token, description } = req.body;
    console.log(req.body.description);
    // const description = req.body.data.description;
    const charge = await stripe.charges.create({
      amount: amount,
      currency: "usd",
      description: description,
      source: token.id,
    });

    console.log(charge);
  });
};