reactjs - 类型 '{}' 缺少类型中的以下属性

在我的 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);

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

答案＃1

你有两个不同的包可能会向你的组件注入它们自己的 props：Redux 和 React Router。

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

type PropsType = RouteComponentProps & StoreProps & DispatchProps;

它需要接收你列为 props 的所有三个接口。StoreProps 和 DispatchProps 是由 Redux 的 connect 高阶组件注入的，这些是没问题的。你的错误信息告诉你缺少的 props 是 history、location 和 match。这些都是 RouteComponentProps 的属性。

现在你的组件实际上并没有使用任何 Router 属性，所以最简单的解决办法就是从 PropsType 中移除 RouteComponentProps。通过将它放在那里，你就要求这些属性必须存在。

如果你想实际包含 RouteComponentProps，那么需要在 index.tsx 中进行更改。你已经用 BrowserRouter 包裹了你的 App，但它实际上没有任何作用，因为你还没有定义任何路由。你需要一个 Switch 组件，里面包含 Route 组件。如果 App 是在 Route 组件中加载的，那么 RouteComponentProps 将会被注入。

查看 React Router 文档，了解如何设置多个路由。这将始终加载 App（所以不会有变化），但现在它将获取所需的 props。声明 Route 的组件有多种方式，但你应该使用 component 属性或 render 属性，而不是 children，因为这些方式可以让 TypeScript 知道路由器的 props 已包含在内。

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