Javascript OnClick按钮在React Js中不执行任何操作

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

请帮助我修复它。（“添加到篮子”按钮不起作用）

---

提前感谢…

您可以显示

StateProvider

，而不是头文件吗？只是，不要将其作为评论发布谢谢我现在编辑我不是上下文或减缩器方面的专家，但代码看起来可疑<代码>状态提供例如，听起来拼错了，但无论如何都不用于任何用途。而且

useContext（）

不会像您的代码所暗示的那样返回数组。在

useReducer

中设置

initialState

？

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;

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

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;