reactjs - React-Redux：值从一页传递到另一页

问题描述

嗨，我正在使用 MERN 堆栈构建一个电子商务应用程序，但我几乎是这些技术的初学者。

我在 redux 将用户输入值传递到新页面时遇到问题。

这是减速机

const PurchaseReducer=(state={},action)=> {

 switch(action.type){
  case 'PURCHASE':
   return action.payload;

  default:
   return state;
 }

}
 export default PurchaseReducer;

这是动作


const setPurchase=(type,payload)=>{

    return{
        type:type,
        payload: payload
    }

}

export default setPurchase;

由于有很多路线，我有一个通用的应用程序用于这些目的，我将只包括相关部分。

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);

这就是 Redux 方面的全部内容

然后我们有 DetailForm 这是一个简单的表单，需要一些用户输入

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;

来自这个表单的输入应该被传递并显示在下面的代码中


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;

但是由于某种原因，输入没有被传递，或者表单的提交不起作用，感谢您对此事的任何帮助！

谢谢！

标签： reactjsredux

reactjs - React-Redux：值从一页传递到另一页

问题描述

解决方案

推荐阅读