问题
Hi I am building an eCommerce app using the MERN stack but I'm pretty much a beginner to these technologies.
I'm having an issue with redux passing the user input value to a new page.
This is the reducer
const PurchaseReducer=(state={},action)=> {
switch(action.type){
case 'PURCHASE':
return action.payload;
default:
return state;
}
}
export default PurchaseReducer;
This is the action
const setPurchase=(type,payload)=>{
return{
type:type,
payload: payload
}
}
export default setPurchase;
Since there are many routes, I have a common app for those purposes, I will include only the related parts.
class Test extends Component {
case 'checkout' :
return <CheckoutForm dispatch={this.props.dispatch} user={this.props.user} userobject={this.props.userobject} setproduct={this.props.setproduct} setpurchase={this.props.setpurchase}/>
unction mapStateToProps(state) {
return {
purchase: state.PurchaseReducer
}
}
function mapDispatchToProps(dispatch) {
return{
setpurchase: (type, payload)=>{dispatch(setPurchase(type,payload))}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Test);
That's all for the Redux side
then We have the DetailForm which is a simple form which requires some user input
class DetailForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
address1 : '',
address2: '',
city: '',
postalCode: '',
cash: false,
cardNumber: '',
CardOtp: '',
CardDate: '',
showing: true,
}
this.HandleSubmit = this.HandleSubmit.bind(this);
}
HandleSubmit=(e)=>{
let data = {
name: this.state.name,
address1 : this.state.address1,
address2: this.state.address2,
city: this.state.city,
postalCode: this.state.postalCode,
cash: this.state.cash,
cardNumber: this.state.cardNumber,
CardOtp: this.state.CardOtp,
CardDate: this.state.CardDate,
};
this.props.setpurchase('PURCHASE',data);
console.log('submit');
console.log(data);
}
handleCLick(e) {
AlertDialog();
}
onClick=()=>{
this.props.setpurchase('PURCHASE',this.state)
this.props.dispatch('CHECKOUT')
}
render() {
const {showing} = this.state;
return(<div>
<ComplexNavigationNoDrawer
dispatch={this.props.dispatch}
userobject={this.props.userobject}
setpurchase={this.props.setpurchase}
/>
<div className="container">
<Paper elevation={3} className="paper">
<h2>Purchase details</h2>
<Card>
<form onSubmit={this.HandleSubmit} >
<TextField name={"name"}
required id="standard-required"
label="Enter Name"
className={"usernametext"}/><br/>
<TextField name={"address1"}
required id="standard-required"
label="Enter Address 1"
className={"usernametext"} /><br/>
<TextField name={"address2"}
required id="standard-required"
label="Enter Address 2"
className={"usernametext"} /><br/>
<TextField name={"city"}
required id="standard-required"
label="City"
className={"usernametext"} /><br/>
<TextField name={"postalCode"}
required id="standard-required"
label="Postal code"
className={"usernametext"}/><br/><br/>
<p>Press below icon if you wish to pay cash on delivery</p>
<br/>
<FormControlLabel
name={"cash"}
color="secondary"
label="Cash"
control={<Radio/>}
className={"usernametext"}
onClick={() => this.setState({showing: !showing})}
>
Cash payment
</FormControlLabel>
{showing ?
<div className="cardDetails">
<TextField name={"cardNumber"}
required id="standard-required"
label="Card number"
className={"usernametext"}/><br/>
<TextField name={"CardOtp"}
required id="standard-required"
label="OTP"
className={"usernametext"}/><br/>
<TextField name={"CardDate"}
required id="standard-required"
label="Expiry Date"
className={"usernametext"}/>
</div> : null
}
<br/>
<Button color={"primary"}
style={{margin:"20px"}}
variant={"contained"}
className={"usernametext"}
type={"submit"}
onClick={()=>{this.onClick()}}
>Confirm</Button>
<Button variant="contained"
color="secondary"
style={{margin:"20px"}}
className={"usernametext"}
onClick={()=>{this.props.dispatch('CART')}}
>
Cancel
</Button>
</form>
</Card>
</Paper>
</div>
</div>);
}
}
export default DetailForm;
The input from this form should be passed and displayed in the following code
class CheckoutForm extends Component {
constructor(props) {
super(props);
this.state = {
purchase: ''
}
}
confirmPurchase(pid) {//unrelated code}
}
render() {
const classes = makeStyles({
table: {
minWidth: 650,
},
});
return (
<div>
<ComplexNavigationNoDrawer
dispatch={this.props.dispatch}
userobject={this.props.userobject}
setpurchase={this.props.setpurchase}
/>
<div className="container">
<Paper elevation={3} className="paper">
<h2>Confirm purchase</h2>
<div className="productDetils">
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="right">Address Line 1</TableCell>
<TableCell align="right">Address Line 2</TableCell>
<TableCell align="right">City</TableCell>
<TableCell align="right">Postal Card</TableCell>
<TableCell align="right">Payment method</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow key={this.state.purchase.name}>
<TableCell component="th" scope="row">{this.state.purchase.name}</TableCell>
<TableCell align="right">{this.state.purchase.address1}</TableCell>
<TableCell align="right">{this.state.purchase.address2}</TableCell>
<TableCell align="right">{this.state.purchase.city}</TableCell>
<TableCell align="right">{this.state.purchase.postalCode}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</div>
<Button
variant="contained"
color="primary"
type={"submit"}
onClick={()=>{this.confirmPurchase(this.props.product.id)}}
>
Confirm
</Button>
<Button
variant="contained"
color="primary"
onClick={()=>{this.props.dispatch('PAY')}}
>
Back
</Button>
<Card>
</Card>
</Paper>
</div>
</div>
);
}
}
export default CheckoutForm;
But for some reason, the input is not being passed, or rather the submitting of the form isn't working, appreciate any help regarding this matter!
Thank you!
回答1:
You're not passing type in handleSubmit of DetailForm, so either pass 'PURCHASE' there as first param or change the action in mapDispatchToProps to:
setpurchase: payload => {dispatch(setPurchase('PURCHASE',payload))}
回答2:
handleSubmit(e) {
e.preventDefault();
let data = {
name: this.state.name,
address1 : this.state.address1,
address2: this.state.address2,
city: this.state.city,
postalCode: this.state.postalCode,
cash: this.state.cash,
cardNumber: this.state.cardNumber,
CardOtp: this.state.CardOtp,
CardDate: this.state.CardDate,
};
this.props.setpurchase("PURCHASE",data);
}
i think you have missed "PURCHASE" in the handleSubmit method
AND
Try calling this.handleSubmit in the Confirm Button tag onClick event, but there are some cool ways you can try to make even more simple
Or
Try connect in the detailForm
来源：https://stackoverflow.com/questions/61980972/react-redux-value-passing-from-one-page-to-another