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

---

我以前没有一起使用useContext和TS，所以可能我遗漏了一些明显的东西，但TS似乎没有检测到我正在使用用户上下文提供程序包装这个组件并传入。有什么想法吗？

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}>

---

您应该在组件外部创建上下文，并将其实例作为useContext参数导出到子级将上下文创建移出组件，React认为您正在使用钩子并建议这样做。

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

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}>

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