Question

我收到此错误

client：159 [at-loader] ./src/App.tsx:40:46 TS2322：无法将类型'unknown'分配给类型'FunctionComponent | ComponentClass | ComponentClass，任何> | FunctionComponent> |未定义”。不能将类型'unknown'分配给类型'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，错误就消失了。

我在做什么错了？

Answer 1

您可以解决以下错误：

export default compose<React.ComponentType<Props>>(
  connect(
    mapState,
    actionCreators
  ),
  withRouter
)(User);

Answer 2

问题在于TypeScript难以为compose函数推断正确的类型。因此它使用compose中的most general form，因此结果类型不正确。

您可以通过显式键入compose来解决此问题，但我不建议这样做，因为connect的返回类型非常复杂。

我建议像这样“手动”编写函数

withRouter(
    connect(
        mapState,
        actionCreators
    )(User))

TS错误：由于withRouter，无法将类型'unknown'分配给类型'FunctionComponent <any>

2 个答案: