OnClick按钮在React Js中不做任何事情

如何解决OnClick按钮在React Js中不做任何事情

此React Js代码编译时带有警告，但该按钮不起作用。我不知道为什么它不起作用。 （我只是React Js的初学者）

import React from "react";
import "./Product.css";
import StarRateIcon from "@material-ui/icons/StarRate";
import { useStateValue } from "./StateProvider";

function Product({ title,image,price,rating }) {
  const [{ basket },dispatch] = useStateValue();

  const addToBasket = () => {
    // dispatch the item into datalayer
    dispatch({
      type: "ADD_TO_BASKET",item: {
        title: title,image: image,price: price,rating: rating,},});
  };

  return (
    <div className="product">
      <div className="product__info">
        <p className="product__title">{title}</p>
        <p className="product__price">
          <small>$</small>
          <strong>{price}</strong>
        </p>
        <div className="product__rating">
          {Array(rating)
            .fill()
            .map((_,i) => (
              <StarRateIcon />
            ))}
        </div>
      </div>
      <img src={image} width="200px" alt="" />
      <button onClick={addToBasket}>Add to Basket </button>
    </div>
  );
}

export default Product;

另一个使用篮和分派的文件。

import React from "react";
import "./Header.css";
import SearchIcon from "@material-ui/icons/Search";
import ShoppingBasketIcon 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="https://pngimg.com/uploads/amazon/amazon_PNG11.png"
          alt=""
        />
      </Link>
      <div className="header__search">
        <input className="header__searchInput" type="text" />
        <SearchIcon className="header__searchIcon" />
      </div>

      <div className="header__nav">
        <div className="header__option">
          <span className="header__optionlineone">Hello </span>
          <span className="header__optiontwo">Sign in</span>
        </div>

        <div className="header__option">
          <span className="header__optionlineone">Return</span>
          <span className="header__optiontwo">& Orders</span>
        </div>

        <div className="header__option">
          <span className="header__optionlineone">Your</span>
          <span className="header__optiontwo">Prime</span>
        </div>

        <Link to="/checkout">
          <div className="header__optionBasket">
            <ShoppingBasketIcon />
            <span className="header__optionlinetwo header__basketCount">
              {basket?.length}
            </span>
          </div>
        </Link>
      </div>
    </div>
  );
}

export default Header;

分享警告图片（可能会有所帮助）

stateprovider.js

import React,{ createContext,useContext,useReducer } from "react";

// prepares the datalayer
export const StateContext = createContext();

// wrap our aap and provide the data layer
export const StateProvide = ({ reducer,initialState,children }) => (
  <StateContext.Provider value={useReducer(reducer,initialState)}>
    {children}
  </StateContext.Provider>
);
// pull information from the data layer
export const useStateValue = () => useContext(StateContext);

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;

请帮助我修复它..（“添加到购物篮”按钮不起作用） 预先感谢...