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

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);

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

标签： reactjstypescriptreact-router

Answer 1

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

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

type PropsType = RouteComponentProps & StoreProps & DispatchProps;

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

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

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

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

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