打字稿错误 - 无法在包装的子组件中找到反应上下文

Question

我正在尝试使用这篇文章作为指导，从子组件动态设置父组件中的上下文

这是我的 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 似乎没有检测到我正在用用户上下文提供程序包装这个组件并传入。有什么想法吗？

Answer 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'