类型“{}”缺少类型中的以下属性

Question

在我的 React 项目中，我的 App 组件出现以下错误。

Type '{}' is missing the following properties from type 'Pick<ClassAttributes<App> & RouteChildrenProps<{}, unknown> & { userData: UserDataType | undefined; userRightList: UserRightListType[] | undefined; userPermissionList: string[] | undefined; } & { ...; }, "ref" | ... 3 more ... | "key">': history, location, matchts(2739)

以下是我的 index.tsx 文件代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reduxStore from './redux/store';

ReactDOM.render(
  <Provider store={reduxStore.store}>
    <BrowserRouter>
      <App /> // getting the error here
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

以下是我的 App.tsx 文件代码：

import { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
import ErrorBoundary from './components/ErrorBoundary';
import { getUserByToken, getUserRights, setUserRights } from './redux/actions';
import { ReduxStateType } from './type-definitions';
import { isAuthenticated } from './utils/is-authenticated';

type StoreProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatch;

type PropsType = RouteComponentProps & StoreProps & DispatchProps;

class App extends Component<PropsType, any> {
  componentDidMount() {
    const {
      userData,
      getUserByToken,
      getUserRights,
      userRightList,
    } = this.props;
    const isAuth = isAuthenticated(userData);
    if (!userData?.username && isAuth) {
      getUserByToken();
    }
    if (userRightList?.length === 0 && isAuth) {
      getUserRights();
    }
  }

  componentDidUpdate(prevProps: PropsType) {
    const {
      userData,
      userRightList,
      userPermissionList,
      setUserRights,
    } = this.props;

    if (
      userData &&
      Object.keys(userData).length > 0 &&
      userRightList &&
      userRightList?.length > 0 &&
      userPermissionList?.length === 0
    ) {
      setUserRights();
    }
  }

  render() {
    return (
      <Fragment>
        <ErrorBoundary></ErrorBoundary>
      </Fragment>
    );
  }
}

function mapStateToProps(state: ReduxStateType) {
  return {
    userData: state.auth?.userData,
    userRightList: state.auth?.userRightList,
    userPermissionList: state.shared?.userPermissionList,
  };
}

const mapDispatch = {
  getUserByToken,
  getUserRights,
  setUserRights,
};

export default connect<StoreProps, DispatchProps>(
  mapStateToProps,
  mapDispatch
)(App);

我在render 方法中的index.tsx 文件中遇到错误。我是 TypeScript 的新手。如果有人能告诉我哪里做错了，我将不胜感激。

Answer 1

您有两个不同的包，它们可能会将它们自己的 props 注入到您的组件中：Redux 和 React Router。

当您将组件定义为class App extends Component<PropsType, any> 时，它期望接收PropsType 作为其道具。

type PropsType = RouteComponentProps & StoreProps & DispatchProps;

它需要接收您列为道具的所有三个接口。 StoreProps 和 DispatchProps 是 Redux 注入的 connect 高阶组件，这些都可以。您的错误消息告诉您缺少的道具是history、location 和match。这些是RouteComponentProps 的属性。

现在你的组件实际上并没有使用任何 Router 属性，所以最简单的解决方案就是从 PropsType 中删除 RouteComponentProps。通过把它放在那里，你要求这些道具存在。

如果您想实际包含RouteComponentProps，则需要在index.tsx 中进行更改。您已将 App 包装在 BrowserRouter 中，但实际上它并没有做任何事情，因为您还没有定义任何路线。您需要一个 Switch 组件，其中包含 Route 组件。如果App 被加载到Route 组件中，那么RouteComponentProps 将被注入。

查看React Router docs 了解如何设置多条路线。这将始终加载App（所以没有变化），但现在它将获得所需的道具。有多种方法可以为 Route 声明组件，但您希望使用 component prop 或 render prop 而不是子组件，因为这些方法允许 typescript 知道包含路由器 props。

ReactDOM.render(
  <Provider store={reduxStore.store}>
    <BrowserRouter>
      <Switch>
        <Route
          path="/"
          component={App}
        />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);