reactjs - Typescript-fejl - Kan ikke finde React-kontekst i indpakket børnekomponent

Jeg prøver at sætte kontekst dynamisk i en overordnet komponent fra en børnekomponent ved at bruge dette opslag som vejledning

Her er min 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>
  );
}

Derefter, i GenerateLinks.tsx:

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

Fejlen jeg får er for UsersContext-argumentet, lige her ^:

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

Jeg har ikke brugt useContext og TS sammen før, så måske overser jeg noget åbenlyst, men det ser ud til, at TS ikke registrerer, at jeg pakker denne komponent ind med brugernes context-provider og sender ind. Nogle idéer?

Svar #1

UsersContext bør være uden for App-komponenten og markeret til eksport.

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

Derefter kan du importere det i GenerateLinks:

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

Relaterede artikler