使用 react-redux 连接功能时渲染组件上的打字稿错误

Posted 2023-03-31

【中文标题】使用 react-redux 连接功能时渲染组件上的打字稿错误

【英文标题】：Typescript error on rendered component when using react-redux connect function

【发布时间】：2018-06-27 01:55:58

【问题描述】：

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

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

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

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：这些是从父组件传入组件的props， 所以我在渲染的组件元素上看不到打字问题。

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

IFileItemReduxProps：从 react-redux 的 mapStateToProps 返回的 props。

IFileItemDispatchProps：从 react-redux 的 mapDispatchToProps 返回的 props。

据我了解，连接函数的类型如下：

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

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

【参考方案1】：

乍一看，我发现你的 IFileItemProps 和 IFileItemReduxProps 接口中属性 'fileExplorerInfo' 的类型是不同的。

你的意思是说 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);

希望这会有所帮助:)