使用react-redux连接函数时，渲染组件上的Typescript错误

Question

我有一个组件类，我使用react-redux连接redux存储，但是当我尝试将组件传递给connect函数时，我收到错误。

class FileItem extends Component<IFileItemProps, undefined> {
}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps => {
};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {
};

// This FileItem component passed into the below parameter is where I am getting the error

export default connect<IFileItemReduxProps, IFileItemDispatchProps, IFilePassedProps, IFileItemReduxState>(mapStateToProps, mapDispatchToProps)(FileItem);

这些是我正在使用的每个接口（除了Dispatch来自redux）：

export interface IFileItemProps {
    file: FileDirectoryNode;
    fileExplorerInfo: FileExplorerReducerState;
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

export interface IFilePassedProps {
    file: FileDirectoryNode;
}

export interface IFileItemReduxState {
    fileExplorer: FileDirectoryTree;
}

export interface IFileItemReduxProps {
    fileExplorerInfo: FileDirectoryTree;
}

export interface IFileItemDispatchProps {
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

IFileItemProps：该组件将使用的所有类型

IFilePassedProps：这些是从父级传入组件的道具， 所以我不会在渲染的组件元素上看到输入问题。

IFileItemReduxState：从react-redux传递给mapStateToProps的状态。

IFileItemReduxProps ：来自react-reducex的mapStateToProps返回的道具。

IFileItemDispatchProps ：来自react-redux的mapDispatchToProps返回的道具。

根据我的理解，connect函数的输入方式如下：

connect<TReturnedMapStateToProps = {}, TReturnedMapDispatchToProps = {}, TPassedFromOutsideProps= {}, TReduxState = {}>

但是当我这样做时，我会收到以下错误：

Answer 1

乍一看，我发现该属性的类型＆＃39; fileExplorerInfo＆＃39;在您的IFileItemProps和IFileItemReduxProps接口中有所不同。

你的意思是FileDirectoryTree或FileExplorerReducerState的类型吗？

话虽这么说，我遇到了类似的问题，我的组件的签名不匹配。幸运的是，我没有传递道具所以我就这样修好了

class FileItem extends Component<IFileItemProps &
                                 IFileItemReduxProps & 
                                 IFileItemDispatchProps, undefined> {}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps =>{};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {};

export default connect(mapStateToProps, mapDispatchToProps)(FileItem);

希望这会有所帮助：）