Javascript ReactJS:未处理的拒绝（TypeError）：无法读取属性'；推动'；未定义的。将问题推到另一个组件
当我尝试注册并发布条带付款时，应用程序运行不正常，它不会推送sashboard组件Javascript ReactJS:未处理的拒绝（TypeError）：无法读取属性'；推动'；未定义的。将问题推到另一个组件,javascript,reactjs,stripe-payments,Javascript,Reactjs,Stripe Payments,当我尝试注册并发布条带付款时，应用程序运行不正常，它不会推送sashboard组件 我得到的错误是： 未处理的拒绝（TypeError）：无法读取未定义的属性“push” 手提袋 src/components/sections/SignupForm.js:78 75 | const { id } = paymentMethod; 76 | console.log("111111111 and ID_", id); 77 | aprops.signup(stat
我得到的错误是： 未处理的拒绝（TypeError）：无法读取未定义的属性“push” 手提袋 src/components/sections/SignupForm.js:78
75 | const { id } = paymentMethod;
76 | console.log("111111111 and ID_", id);
77 | aprops.signup(state, id);
78 | aprops.history.push("/dashboard");
| ^ 79 |
80 | console.log("3333333333");
81 | // setState({ ...state, stripeId: id });
import React, { useState } from "react";
import classNames from "classnames";
import { Link, withRouter, Route } from "react-router-dom";
import SectionHeader from "./partials/SectionHeader";
import Input from "../elements/Input";
import Button from "../elements/Button";
import { signupUser } from "../../redux/actions/user_action";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { connect } from "react-redux";
import { createHashHistory } from 'history';
export const history = createHashHistory()
//Checkout Form component-----------------------------------------------=
const StripeForm = (aprops) => {
const [state, setState] = useState({
bname: "Busines Name",
email: "Email address",
password: "Password",
name: "Name on Card",
amount: 0,
plan: "",
stripeId: "",
});
const {
className,
topOuterDivider,
bottomOuterDivider,
topDivider,
bottomDivider,
hasBgColor,
invertColor,
...props
} = aprops;
const outerClasses = classNames(
"signin section",
topOuterDivider && "has-top-divider",
bottomOuterDivider && "has-bottom-divider",
hasBgColor && "has-bg-color",
invertColor && "invert-color",
className
);
const innerClasses = classNames(
"signin-inner section-inner",
topDivider && "has-top-divider",
bottomDivider && "has-bottom-divider"
);
const sectionHeader = {
title: "Welcome. We exist to make cybersecurity easier.",
};
const handlechangeall = (event) => {
setState({ ...state, [event.target.name]: event.target.value });
};
const handleRadio = (e) => {
setState({
...state,
amount: Number(e.target.value) * 100,
plan: e.target.id,
});
};
const handleStripeSubmit = async () => {
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: "card",
card: elements.getElement(CardElement),
});
if (!error) {
console.log("response of stripe payment___", paymentMethod);
const { id } = paymentMethod;
console.log("111111111 and ID_", id);
aprops.signup(state, id);
aprops.history.push("/dashboard");
console.log("3333333333");
// setState({ ...state, stripeId: id });
}
};
const handlesubmit = (event) => {
event.preventDefault();
handleStripeSubmit();
//alert( JSON.stringify(this.state));
console.log(JSON.stringify(state));
};
//Stripe hooks-------
const stripe = useStripe();
const elements = useElements();
//=============================
return (
<section {...aprops} className={outerClasses}>
<div className="container">
<div className={innerClasses}>
<SectionHeader
tag="h1"
data={sectionHeader}
className="center-content"
/>
<div className="tiles-wrap">
<div className="tiles-item">
<div className="tiles-item-inner">
<form onSubmit={handlesubmit}>
<fieldset>
<div className="mb-12">
<Input
label="Business name"
type="text"
name="bname"
value={state.bname}
onChange={handlechangeall}
labelHidden
required
/>
</div>
<div className="mb-12">
<Input
type="email"
name="email"
label="Email"
value={state.email}
onChange={handlechangeall}
labelHidden
required
/>
</div>
<div className="mb-12">
<Input
type="password"
name="password"
label="Password"
value={state.password}
onChange={handlechangeall}
labelHidden
required
/>
</div>
{/* Stripe Integration */}
<div className="signin-bottom has-top-divider">
<div className="pt-32 text-xs center-content text-color-low">
Select Subscription tier (to select, use up & down arrow
keys):
</div>
</div>
{/* all packages amounts here */}
<div onChange={handleRadio} className="radio">
{console.log("checking plan amount____", state.amount)}
<div>
<label>
<input
type="radio"
id="default"
value="49"
name="plan"
/>
($49/month)
</label>
</div>
<div>
<label>
<input
type="radio"
id="basic"
name="plan"
value="199"
/>
Basic ($199/month)
</label>
</div>
<div>
<label>
<input
type="radio"
id="complete"
name="plan"
value="249"
/>
Complete ($249/month)
</label>
</div>
</div>
<div className="pt-32 text-xs center-content text-color-low">
Enter Card Details Here!
<div className="mb-12">
<Input
label="Name on the card"
type="text"
name="name"
value={state.name}
onChange={handlechangeall}
labelHidden
required
/>
</div>
<div
style={{
border: "1px solid grey",
padding: 15,
backgroundColor: "#cccccc",
}}
>
<CardElement />
</div>
{/* <button type="submit" disabled={!stripe}>
Checkout
</button> */}
<div className="mt-24 mb-32">
<Button type="submit" color="primary" wide>
Register
</Button>
</div>
</div>
</fieldset>
</form>
<div className="signin-bottom has-top-divider">
<div className="pt-32 text-xs center-content text-color-low">
Already have an account?{" "}
<Link to="/login/" className="func-link">
Login
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
// const SignupForm = () => {
// return (
// <Elements stripe={stripePromise}>
// <StripeForm />
// </Elements>
// );
// };
// SignupForm.propTypes = propTypes;
// SignupForm.defaultProps = defaultProps;
const mapStateToProps = (state) => ({});
const mapDispatchToProps = (dispatch) => {
return { signup: (data, id) => dispatch(signupUser(data, id)) };
};
export default connect(mapStateToProps, mapDispatchToProps)(StripeForm);
import React，{useState}来自“React”；
从“类名”中导入类名；
从“react router dom”导入{Link，withRouter，Route}；
从“/partials/SectionHeader”导入SectionHeader；
从“./元素/输入”导入输入；
从“./元素/按钮”导入按钮；
从“./../redux/actions/user_action”导入{signupUser}”；
从“@stripe/react stripe js”导入{CardElement，useStripe，useElements}；
从“react redux”导入{connect}；
从“历史”导入{createHashHistory}；
export const history=createHashHistory（）
//签出表单组件-----------------------------------------------=
常量条带形式=（aprops）=>{
常量[状态，设置状态]=使用状态({
bname:“企业名称”，
电子邮件：“电子邮件地址”，
密码：“密码”，
姓名：“卡上姓名”，
金额：0，
计划：“，
条带ID:“”，
});
常数{
类名，
拓扑分割器，
底部外摄像机，
顶部分隔器，
底部分隔器，
hasBgColor，
反转颜色，
…道具
}=aprops；
const outerlasses=类名(
“签名部分”，
顶部分隔器&“具有顶部分隔器”，
BottomOuterVider&“具有底部分隔符”，
hasBgColor&“hasBgColor”，
反转颜色&“反转颜色”，
类名
);
const innerClasses=类名(
“登录内部部分内部”，
顶部分隔器&“具有顶部分隔器”，
底部分隔器&“具有底部分隔器”
);
const sectionHeader={
标题：“欢迎。我们的存在是为了让网络安全变得更容易。”，
};
const handlechangeall=（事件）=>{
setState（{…state，[event.target.name]：event.target.value}）；
};
常数handleRadio=（e）=>{
设定状态({
……国家，
金额：数字（如目标值）*100，
计划：e.target.id，
});
};
const handleStripeSubmit=async（）=>{
const{error，paymentMethod}=wait stripe.createPaymentMethod({
输入：“卡片”，
卡片：elements.getElement（CardElement），
});
如果（！错误）{
console.log（“条带支付的响应”，paymentMethod）；
const{id}=paymentMethod；
console.log（“111111111和ID”，ID）；
A.注册（州，id）；
aprops.history.push（“/仪表板”）；
控制台日志（“3333”）；
//setState（{…state，stripeId:id}）；
}
};
const handlesubmit=（事件）=>{
event.preventDefault（）；
handleStripeSubmit（）；
//警报（JSON.stringify（this.state））；
log（JSON.stringify（state））；
};
//条纹钩-------
常量stripe=useStripe（）；
常量元素=useElements（）；
//=============================
返回(
{/*条带集成*/}
选择订阅层（要选择，请使用上下箭头
钥匙）：
{/*此处的所有包裹金额*/}
{console.log（“检查计划金额”，state.amount）}
（49美元/月）
基本（199美元/月）
完成（249美元/月）
在此处输入卡的详细信息！
{/*
const mapStateToProps = (state) => ({ history: [] });
const {
className,
topOuterDivider,
bottomOuterDivider,
topDivider,
bottomDivider,
hasBgColor,
invertColor,
history = [],
...props
} = aprops;