Question

我正在开发一个React购物车应用程序。如果用户单击“清除购物车”按钮，则将清除整个购物车。在此之前，应用程序应确认操作，因此，我使用了“反应确认警报”。如果用户单击“是”按钮，它将清除购物车，并且应导航到根页面（'/'）。我在互联网上和StackOverflow上进行了搜索，并尝试了给定here的三种方式。但是没有任何效果。对于this.props.history.push('/')和this.props.router.push('/')都给我一个TypeError说未定义的对象，而对于useHistory()来说我说了违反反应挂钩原则。我有什么可以做的工作吗？预先感谢！

代码：-

import React, { useEffect, useState, Component} from 'react';

import Titles  from "../Titles";
import CartColumns from './CartColumns';
import EmptyCart  from "./EmptyCart";

import CartList from "./CartList";
import {connect} from "react-redux";
import {Link, Redirect} from "react-router-dom";
import Axios from "axios";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css' // Import css

const mapStateToProps = ({ session, history}) => ({
    session, history
});

class Cart extends Component {

    constructor() {
        super();
        this.removeItem = this.removeItem.bind(this);
    }

    state = {
        Cart: [],
        total : 0,
        discount: 0
    };

    componentDidMount() {
        if(this.props.session.userId !== null){
            this.getItems();
        }
    }

    getItems = () => {
        //function to get the items
    };

    removeItem = (productId) => {
        //method to remove an item
    };

    clearCart = () => {

        confirmAlert({
            title: 'Clear Cart',
            message: 'Are you sure to clear the Cart?',
            buttons: [
                {
                    label: 'Yes',
                    onClick: () => {Axios.get('http://localhost:8000/api/cart/clearCart', {params:{userId: this.props.session.userId}}); 
                                    } //I want to redirect from here
                },
                {
                    label: 'No'
                }
            ]
        })
    };

    checkout= () => {
        //Checkout function
    };

    render() {
        let total = this.state.total;
        let discount = this.state.discount;

        if(this.props.session.username !== null){
            return (
                <section>
                    {(this.state.Cart.length > 0) ? (
                        <React.Fragment>
                            <Titles name ="Your " title = "Cart">Cart</Titles>
                            <CartColumns/>
                            <CartList cart = {this.state.Cart} removeItem={this.removeItem}/>
                            <div className="container">
                                <div className="row">
                                    <div className="col-10 mt-2 ml-sm-5 ml-md-auto col-sm-8 text-capitalize text-right">
                                        <h5>
                                            <span className="text-title">Sub Total: </span>
                                            <strong>$ {total}</strong>
                                        </h5>
                                        <h5>
                                            <span className="text-title">Discount: </span>
                                            <strong>$ {discount}</strong>
                                        </h5>
                                        <h5>
                                            <span className="text-title">Total: </span>
                                            <strong>$ {total - discount}</strong>
                                        </h5>


                                            <div className="col-10 mt-2 ml-sm-5 ml-md-auto col-sm-8 text-capitalize text-right">
                                                <button className="btn btn-outline-danger text-uppercase mb-3 px-5" type="button" onClick={this.clearCart}>Clear Cart</button>
                                                <button className="btn btn-outline-info ml-3 text-uppercase mb-3 px-5" type="button" onClick={this.checkout}>Check Out</button>
                                            </div>


                                    </div>
                                </div>
                            </div>
                        </React.Fragment>
                    ) : (
                        <EmptyCart/>
                        )
                    }
                </section>
            );
        } else {
            return(
                <Redirect to="/login" />
            );
        }

    }
}

export default connect(
    mapStateToProps
)(Cart);

Answer 1

我认为您有2个选择。

首先：只需使用window.location这样的方法

 // Simulate a mouse click:
window.location.href = "http://www.example.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.example.com");

第二：使用反应状态

import React from 'react'
import { Redirect } from 'react-router-dom'
class Cart extends Component {

    constructor() {
        super();
    }

    state = {
      isRedirect: false 
    };
    const onClick = () =>{
     this.setState({isRedirect: true})
    }
   render() {
      let isRedirect = this.state.isRedirect;
      if(isRedirect == true){
       return <Redirect to='/target' />
     }
     return (
      <div>
        ... 
      </div>
     )
   )
 }

如何在react ConfirmAlert中重定向到另一个页面？

1 个答案: