reactjs - Typescript ข้อผิดพลาด - ไม่สามารถหาคอนเท็กซ์ของ react ในคอมโพเนนต์ลูกที่ห่อหุ้มอยู่

ฉันกำลังพยายามตั้งค่าบริบทในส่วนประกอบหลักแบบไดนามิกจากส่วนประกอบลูกโดยใช้โพสต์นี้เป็นแนวทาง

นี่คือไฟล์ App.tsx ของฉัน:

export interface User {
  username: string;
}

export interface iUserContext {
  users: User[];
  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
}

function App() {
  const [users, setUsers] = useState<User[]>([]);
  const value = { users, setUsers };

  // set defaults
  const UsersContext = createContext<iUserContext>({
    users: [],
    setUsers: () => {},
  });

  return (
    <div className="App">
      <Router>
        <UsersContext.Provider value={value}>
          <Layout>
            <Switch>
              <Route path="/generated-links">
                <GeneratedLinks />
              </Route>
              <Route path="/">
                <GenerateLinks />
              </Route>
            </Switch>
          </Layout>
        </UsersContext.Provider>
      </Router>
    </div>
  );
}

จากนั้น ในไฟล์ GenerateLinks.tsx:

const GenerateLinks = () => {
  const history = useHistory();
  const { users, setUsers } = useContext<iUserContext>(UsersContext);

ข้อผิดพลาดที่ฉันได้รับเกิดจากอาร์กิวเมนต์ UsersContext เพียงแค่ตรงนี้ ^:

Cannot find name 'UsersContext'. Did you mean 'useContext'?

ฉันยังไม่เคยใช้ useContext และ TS ร่วมกันมาก่อน ดังนั้นอาจจะมีบางอย่างที่ฉันมองข้ามไป แต่ดูเหมือนว่า TS จะไม่ตรวจจับว่าฉันกำลังห่อคอมโพเนนต์นี้ด้วย providers ของ context ของผู้ใช้และส่งค่าเข้าไป มีไอเดียอะไรบ้างไหม?

คำตอบ #1

UsersContext ควรอยู่นอก App คอมโพเนนต์และทำเครื่องหมายเพื่อการส่งออก

export interface iUserContext {
  users: User[];
  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
}

export const UsersContext = createContext<iUserContext>({
  users: [],
  setUsers: () => {},
});

function App() {
  const [users, setUsers] = useState<User[]>([]);
  const value = { users, setUsers };

  return (
    <div className="App">
      <Router>
        <UsersContext.Provider value={value}>

จากนั้น คุณสามารถนำเข้าได้ใน GenerateLinks:

import { UsersContext, iUserContext } from './App'