购物车按钮反应的问题

Question

I'm trying to make a button where every time I click it adds the item to the cart, but the problem is that when I click nothing happens, as if it were not even a button:

Product.js :

import React from 'react'
import './Product.css'
import {useStateValue} from './StateProvider'

function Products({id,title,image,price,rating}) {
const [state,dispatch] = useStateValue();
const addToBasket = () => {
    dispatch({
        type: 'ADD_TO_BASKET',
        item:{
            id: id,
            title: title,
            image: image, 
            price: price,
            rating: rating,  
        },
    });
   };
  return (
    <div className="product">
        <div className="product_info">
            <p>{title}</p>
            <p className="product_price">
                <small>$</small>
                <strong>{price}</strong>
            </p>
            <div className="product_rating">
                {Array(rating).fill().map((_,i) => (
                    <p>⭐</p>
                ))}
            </div>
        </div> 

        <img src={image} alt="" /> 
        <button onClick={addToBasket}>Add to Basket</button> 
    </div>
   );
   }
  export default Products;

Reducer.js :

export const initialState ={
basket:[],
};

const reducer =(state,action)=>{
console.log(action);
switch(action.type){
    case "ADD_TO_BASKET":
        return {
            ...state,
            basket:[...state.basket,action.item],
        };
        default:
            return state;
    }
   };
export default reducer;

Index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { StateProvider } from './StateProvider';
import reducer, {initialState} from './reducer'

ReactDOM.render(
<React.StrictMode>
<StateProvider initialState={initialState} reducer={reducer}>
<App />
</StateProvider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

Header.js (where I put the basket logo):

import React from 'react';
import './Header.css';
import SearchIcon from '@material-ui/icons/Search'
import ShopppingBasketIcon from '@material-ui/icons/ShoppingBasket'
import {Link} from 'react-router-dom'
import { useStateValue } from "./StateProvider"

function Header() {
const [{basket},dispatch] = useStateValue();
return (
    <div className="header"> 
    <Link to="/">
    <img className="header__logo" src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"/>
    </Link>       
    <div className="header__search">
    <input className="header__searchInput" type="text"/> 
    <SearchIcon className="header__searchIcon"/>
    </div>

    <div className="header__nav">
        <Link to="/checkout">
        <div className="header__optionBasket">
            <ShopppingBasketIcon/>
            <span className="header__optionLineTwo
            header__basketCount">{basket?.lenght}</span>
        </div>
        </Link>
    </div>
    </div>
)
}
export default Header

therefore, where I find the problem is that when I click "add to cart" it does not click anything, as if the button did not exist and does not take any action..

Answer 1

try preventing default behaviour like so

const addToBasket = (e) => {
e.preventDefault();
dispatch({
    type: 'ADD_TO_BASKET',
    item:{
        id: id,
        title: title,
        image: image, 
        price: price,
        rating: rating,  
    },
});
};

and you can also try setting a type on the button

<button type="button" onClick={addToBasket}>Add to Basket</button>