复制了这两个组件代码后依然报错

非常感谢！

index:

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

import { AppStateProvider } from "./AppState";

ReactDOM.render(

<React.StrictMode>

<AppStateProvider>

<App />

</AppStateProvider>

</React.StrictMode>,

document.getElementById("root")

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

报错：

AppState

import React, { useState } from "react";

// 1.0: 使用TS接口对 全局的上下文对象 内容进行规范。

//      内容 —— username

//          —— 购物车[] : 每个 item {} 内容是 ID 和 名字

interface AppStateValue {

username: string;

shoppingCart: { items: { id: number; name: string }[] };

}

// 1.1: 全局的上下文对象（默认值）

const defaultContextValue: AppStateValue = {

username: "Ernest",

shoppingCart: { items: [] },

};

// 1.2: 创建全局的上下文对象

export const appContext = React.createContext(defaultContextValue);

// 2.2: 由于涉及全局状态state的更新，需要使用setState

//      因为初始化的是一个函数，所以传入undefined作为初始化值。

//      由于初始化传入的是undefined，所以 React.createContext时候需要规范类型

//      类型是: <setState函数的类型｜undefined>

// appSetStateContext 定义的是一个函数，是一个混合类型，而它的初始化为undefined。

export const appSetStateContext = React.createContext<

React.Dispatch<React.SetStateAction<AppStateValue>>

| undefined>(undefined);

// 2.0: 全局状态组件

//      函数式组件，该组件是高阶组件，功能就是把所有他的子组件包裹起来。并且从全局角度提供数据支持。

//      所以，它的返回值（渲染内容）是 Provider 包裹的 子组件（这些子组件是 被动态传入的，使用props接收到）。

//     （只要是被provider包裹住的组件，不管相差多少层级都可以实现直接数据传递）

//      类似 Vue <Fregarment>

export const AppStateProvider: React.FC = (props) => {

// 2.1: 使用useState hooks，

//      使用上下文数据默认值 初始化组件状态，

//      这个组件状态：state 会用于做 provider的value 属性，这样就可以被作为provider.value使用。

//      <appContext.Provider value = {}>

//    : 因为操作是购物车，会涉及全局state的更新，所以需要把 全局state对应的setter（setState函数）也共享。

//      为了可以共享setState函数，需要创建对应的上下文context，来连接setState函数。appSetStateContext.

//      <appSetStateContext.Provider value={}>  setState函数就可以被作为provider.value使用

const [state, setState] = useState(defaultContextValue);

return (

<appContext.Provider value={state}>

<appSetStateContext.Provider value={setState}>

{props.children}

</appSetStateContext.Provider>

</appContext.Provider>

);

};

报错：

index

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

import { AppStateProvider } from "./AppState";

ReactDOM.render(

<React.StrictMode>

<AppStateProvider>

<App />

</AppStateProvider>

</React.StrictMode>,

document.getElementById("root")

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

报错：