老师好，我在4-9 HOC章节按照视频中修改代码后页面点击“加入购物车”按钮会提示addToCart不是函数。无论是打折还是普通的都会报错，具体报错页面如下：

×
TypeError: addToCart is not a function
onClick
src/components/RobotDiscount.tsx:26
  23 |         <h2>{name}</h2>
  24 |         <p>{email}</p>
  25 |         <p>{value.nickname}</p>
> 26 |         <button onClick={() => addToCart(id, email)}>加入购物车</button>
     | ^  27 |     </div>
  28 | 
  29 | );
View compiled
▼ 19 stack frames were expanded.
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError
node_modules/react-dom/cjs/react-dom.development.js:4070
executeDispatch
node_modules/react-dom/cjs/react-dom.development.js:8243
processDispatchQueueItemsInOrder
node_modules/react-dom/cjs/react-dom.development.js:8275
processDispatchQueue
node_modules/react-dom/cjs/react-dom.development.js:8288
dispatchEventsForPlugins
node_modules/react-dom/cjs/react-dom.development.js:8299
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:8508
batchedEventUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:22396
batchedEventUpdates
node_modules/react-dom/cjs/react-dom.development.js:3745
dispatchEventForPluginEventSystem
node_modules/react-dom/cjs/react-dom.development.js:8507
attemptToDispatchEvent
node_modules/react-dom/cjs/react-dom.development.js:6005
dispatchEvent
node_modules/react-dom/cjs/react-dom.development.js:5924
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:646
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11276
discreteUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:22413
discreteUpdates
node_modules/react-dom/cjs/react-dom.development.js:3756
dispatchDiscreteEvent
node_modules/react-dom/cjs/react-dom.development.js:5889
▲ 19 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

RobotDiscount.tsx中代码如下，Robot.tsx代码类似

import React, { useContext } from 'react';
import styles from './Robot.module.css';
import { appContext } from '../AppState'; // import context
import { appSetStateContext } from "../AppState";
import { withAddToCart } from './AddToCart';


interface RobotProps {
    id: number;
    name: string;
    email: string;
    addToCart: (id: number, email: string) => void;
}

const RobotDiscount: React.FC<RobotProps> = ({ id, name, email, addToCart }) => {
    const value = useContext(appContext);

    return (

        <div className={styles.cardContainer}>
            <img src={`https://robohash.org/${id}`} alt="robot" />
            <h2>打折商品</h2>
            <h2>{name}</h2>
            <p>{email}</p>
            <p>{value.nickname}</p>
            <button onClick={() => addToCart(id, email)}>加入购物车</button>
        </div>

    );
};

export default withAddToCart(RobotDiscount);

AddToCart.tsx代码如下：

import { appSetStateContext } from "../AppState";
import { RobotProps } from "./Robot";


export const withAddToCart = (ChildComponent: React.ComponentType<RobotProps>) => {
    // return class extends React.Component {}; // class component
    return (props: any) => {

        const setState = useContext(appSetStateContext);

        const addToCart = (id: number, email: string) => {
            if (setState) {
                // 因为传入的setState函数默认是undefined，需要进行判断
                setState((state) => {
                    return {
                        ...state,
                        shoppingCart: {
                            items: [...state.shoppingCart.items, { id, email }],
                        }
                    };
                })
            }
        };

        // 返回组件函数
        return <ChildComponent {...props} addToCard={addToCart} />
    }; // function component
}

麻烦老师指导下，多谢！