購物車按鈕反應的問題

Question

我正在嘗試制作一個按鈕，每次我點擊它都會將商品添加到購物車，但問題是當我點擊時什么也沒有發生，好像它甚至不是一個按鈕：

產品.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;

減速器.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;

索引.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（我放籃子標志的地方）：

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

因此，我發現問題的地方在於，當我單擊“添加到購物車”時，它沒有單擊任何內容，就好像該按鈕不存在並且不采取任何操作一樣..

Answer 1

嘗試防止這樣的默認行為

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

你也可以嘗試在按鈕上設置一個類型

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