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)

类型“{}”缺少类型“Pick”中的以下属性：历史记录、位置、匹配（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();

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

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从'react redux'导入{Provider}；
从“./App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
从“/redux/store”导入reduxStore；
ReactDOM.render(
//在这里获取错误
,
document.getElementById（'root'））
);
reportWebVitals（）；

下面是我的App.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();

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

从'react'导入{Component，Fragment}；
从'react redux'导入{connect}；
从'react router dom'导入{RouteComponentProps}；
从“./components/ErrorBoundary”导入ErrorBoundary；
从“/redux/actions”导入{getUserByToken、getUserRights、setUserRights}；
从“/type definitions”导入{ReduxStateType}；
从“/utils/is authenticated”导入{isAuthenticated}；
类型StoreProps=ReturnType；
类型DispatchProps=类型mapDispatch；
PropsType类型=RouteComponentProps&StoreProps&DispatchProps；
类应用程序扩展组件{
componentDidMount（）{
常数{
用户数据，
getUserByToken，
getUserRights，
userRightList，
}=这是道具；
const isAuth=isAuthenticated（userData）；
如果（！userData？.username&&isAuth）{
getUserByToken（）；
}
if（userRightList？.length==0&&isAuth）{
getUserRights（）；
}
}
componentDidUpdate（prevProps:PropsType）{
常数{
用户数据，
userRightList，
用户许可列表，
设置用户权限，
}=这是道具；
如果(
用户数据&&
Object.keys（userData）.length>0&&
用户权限列表&&
userRightList？长度>0&&
userPermissionList？.length==0
) {
setUserRights（）；
}
}
render（）{
返回(
);
}
}
函数MapStateTops（状态：ReduxStateType）{
返回{
userData:state.auth？.userData，
userRightList:state.auth？.userRightList，
userPermissionList:state.shared？.userPermissionList，
};
}
常量映射分派={
getUserByToken，
getUserRights，
设置用户权限，
};
导出默认连接(
MapStateTops，
地图发送
)（App）；

---

我在

render

方法的

index.tsx

文件中得到错误。我是打字新手。如果有人能告诉我哪里做错了，我将不胜感激。

您有两个不同的软件包，它们可能正在向您的组件中注入自己的道具：Redux和React Router

当您将组件定义为

class App extends component

时，它希望收到

PropsType

作为其道具

type PropsType = RouteComponentProps & StoreProps & DispatchProps;

它需要接收您列为道具的所有三个接口

StoreProps

和

DispatchProps

是由Redux

connect

高阶组件注入的，这些都很好。错误消息告诉您缺少的道具是

历史

、

位置

、和

匹配

。这些是

RouteComponentProps

的属性

现在您的组件实际上没有使用任何路由器道具，因此最简单的解决方案就是从

PropsType

中删除

RouteComponentProps

。把它放在那里，你就需要那些道具在场

如果您希望实际包含

RouteComponentProps

，则需要在

index.tsx

中进行更改。您已经将您的

应用程序

包装在

浏览器路由器

中，但实际上它没有做任何事情，因为您没有定义任何路由。您需要一个

开关

组件，其中包含

路由

组件。如果

App

加载到

Route

组件中，则将注入

RouteComponentProps

查看以了解如何设置多个路由。这将始终加载

App

（因此没有更改），但现在它将获得所需的道具。有多种方法可以声明路由的组件，但您希望使用或而不是子级，因为这些方法允许typescript知道包含路由器道具

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

ReactDOM.render(
,
document.getElementById（'root'））
);

我假设是

PropType

导致了这个问题。至于具体是什么，我很早以前就忘记了如何在旧版本的React中使用Typescript了。好吧，但我没有遗漏任何类型定义。组件没有

ownProps

。只有

RouteComponentProps

和

Redux

Props