打字稿错误 - 无法在包装的子组件中找到反应上下文
Typescript error - Unable to find react context in wrapped child component
我正在尝试使用 作为指南
从子组件动态设置父组件的上下文
这是我的 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 没有检测到我正在用用户上下文提供程序包装这个组件并传入。有什么想法吗?
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'
我正在尝试使用
这是我的 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 没有检测到我正在用用户上下文提供程序包装这个组件并传入。有什么想法吗?
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'