首页 文章

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

提问于
浏览 次
1

我有一个组件类，我使用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-redux的mapStateToProps返回的道具 .

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

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

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

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

enter image description here

reactjs typescript redux react-redux

1 回答

  • 2

    乍一看，我发现属性'fileExplorerInfo'的类型在您的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);

    希望这可以帮助 ：）

    回复于

相关问题