使用打字稿的React.SFC面临的问题

时间:2020-03-21 12:27:34

标签: javascript reactjs typescript redux

我正在使用带有Typescript的React / Redux开发一个应用程序,而使用React的Typescript相对较新。我有一个类型为React.SFC的功能组件,并且由于我使用的是Redux,所以我要使用connect HOC将该组件与mapStateToProps and mapDispatchToProps连接起来。但是似乎在传递道具或定义组件的方式上存在一些问题。

我遇到以下错误:

Argument of type 'SFC<AppProps>' is not assignable to parameter of type 'ComponentType

该组件可用的道具如下:

  fetchUsers: typeof fetchUsers;
  users: User[];
  isLoading: boolean;

下面是Users.tsx的代码-

import React from 'react';
import { connect } from 'react-redux';
import Loader from '../Loader/Loader';
import './Users.css';
import { fetchUsers } from '../../Store/Users/actions';
import { AppState } from '../../index';
import { User } from '../../Store/Users/types';

interface AppProps {
  fetchUsers: typeof fetchUsers;
  users: User[];
  isLoading: boolean;
}

const Users: React.SFC<AppProps> = (props) => {
  const { isLoading } = props;
  const showLoader = () => {
    fetchUsers();
  };

  React.useEffect(() => showLoader(), []);
  return (
    <div className="users">
      {isLoading ? <Loader /> : <div>All users</div>}
    </div>
  );
};

const mapStateToProps = (state: AppState) => ({
  users: state.users,
  isLoading: state.isLoading,
});

export default connect(
  mapStateToProps, { fetchUsers },
)(Users);

代码屏幕截图:

enter image description here

错误屏幕截图:

enter image description here

此错误的原因可能是什么?

0 个答案:

没有答案