Ошибка машинописного текста - невозможно найти контекст реакции в обернутом дочернем компоненте

Я пытаюсь динамически установить контекст в родительском компоненте из дочернего компонента, используя этот пост в качестве руководства

Вот мой 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 не обнаруживает, что я оборачиваю этот компонент поставщиком контекста пользователя и передаю его. Есть идеи?


reactjs typescript react-hooks use-context
person Andy    schedule 05.02.2021    source источник
comment
вы должны создать контекст за пределами вашего компонента и экспортировать его экземпляр дочерним элементам в качестве аргументов useContext   -  person Vasyl Butov    schedule 05.02.2021
comment
переместите создание контекста из компонента, React думает, что вы используете хук, и предлагает это.   -  person Gabriel Alcântara    schedule 05.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

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'
person cbr    schedule 05.02.2021