javascript - TS 错误:类型“未知”不可分配给类型“FunctionComponent”由于 withRouter
问题描述
我收到此错误
客户端:159 [at-loader] ./src/App.tsx:40:46 TS2322:类型“未知”不可分配给类型“FunctionComponent | 组件类 | 组件类,任意> | 功能组件> | 不明确的'。类型“未知”不可分配给类型“FunctionComponent>”。
在这个组件上:
import React, { FC, useState } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import User from './scenes/user/User';
const store = configureStore();
type IsOpen = boolean;
const App: FC = () => {
const [sidebarOpen, setSidebarOpen] = useState<IsOpen>(false);
return (
<Provider store={store}>
<BrowserRouter>
<Sidebar
open={sidebarOpen}
sidebar={<PrimaryNav closeNav={() => setSidebarOpen(false)} />}
onSetOpen={setSidebarOpen}
styles={{ sidebar: { background: 'black' } }}>
<Header sidebarOpen={sidebarOpen} onSetSidebarOpen={setSidebarOpen} />
<Switch>
<Route exact={true} path='/' component={NewsArticles} />
<Route exact={true} path='/user' component={User} />
<Route path='/user/:id' component={User} />
</Switch>
</Sidebar>
</BrowserRouter>
</Provider>
);
};
export default App;
在这两条线上
<Route exact={true} path='/user' component={User} />
<Route path='/user/:id' component={User} />
这是用户组件:
import React, { FC, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
type Props = {
match: any;
history: any;
location: any;
withRouter: any;
fetchUsers?: any;
users?: UserInfoModel[];
};
const mapState = (state: UsersAppState, props: Props) => {
return {
users: state.usersReducers.users,
...props
};
};
const actionCreators = {
fetchUsers
};
const User: FC<Props> = props => {
const { history, users, location, match, fetchUsers } = props;
const setID = match.params.hasOwnProperty('id') ? match.params.id : 'AbedA';
const handleFetch = () => {
return fetchUsers(setID);
};
useEffect(() => {
if (!users || !users.length) {
handleFetch();
}
}, []);
useEffect(() => {
handleFetch();
}, [location.pathname, match.params.id]);
return (
<UserContainer history={history} fetchUsers={() => fetchUsers(setID)} users={users} profilePicture={profileImg} />
);
};
export default compose(
connect(
mapState,
actionCreators
),
withRouter
)(User);
我提出的每一件事react-router/react-router-dom
都带有错误。
如果我删除withRouter
错误就消失了。
我究竟做错了什么?
解决方案
您可以像这样解决错误:
export default compose<React.ComponentType<Props>>(
connect(
mapState,
actionCreators
),
withRouter
)(User);
推荐阅读
- ios - 应用程序仅在通过 Xcode 运行时运行,当我尝试在与 Mac 断开连接的设备上运行它时它不起作用
- excel - 获取上次更改/导入 Excel 中的模块的日期
- nfs - 是否可以在 PCFDev 中启用 NFS 服务?
- javascript - 为什么引导模式的“关闭”和“x”按钮不起作用?
- django - Django REST Framework 自定义序列化程序 mixin 不起作用
- c++ - PCL 中 .h、.hpp、.cpp 文件之间的区别
- python - How do I copy .reg file to pure .txt in Python?
- php - 下一篇文章部分在craftcms 中不起作用有人知道这里出了什么问题吗?
- java - 如何在 Java 中首先编写测试?
- python-requests - How to get bond data from fundsupermart using post method?