Búsqueda de sitios web

reactjs - Error de Typescript en el componente renderizado al usar la función connect de react-redux

Tengo una clase de componente que estoy usando con react-redux para conectar la tienda de redux, pero estoy recibiendo un error cuando intento pasar el componente a la función 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);

Estas son cada una de las interfaces que estoy usando (excepto que Dispatch es de 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: Todos los tipos que el componente utilizará

IFilePassedProps: Estas son las props pasadas al componente desde el componente padre, así que no veo problemas de tipado en el elemento del componente renderizado.

IFileItemReduxState: El estado pasado a mapStateToProps desde react-redux.

IFileItemReduxProps: Las props devueltas por mapStateToProps de react-redux.

IFileItemDispatchProps: Las props que se devuelven de mapDispatchToProps de react-redux.

Por lo que entiendo, la función connect está tipeada de la siguiente manera:

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

Pero cuando hago eso, estoy recibiendo el siguiente error así:

Respuesta #1

A primera vista, encontré que el tipo de la propiedad 'fileExplorerInfo' es diferente en tus interfaces IFileItemProps e IFileItemReduxProps.

¿Quisiste decir el tipo para decir FileDirectoryTree o FileExplorerReducerState?

Dicho esto, me encontré con un problema similar donde la firma de mi componente no coincidía. Por suerte para mí, no tenía props de paso, así que lo arreglé de esta manera

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

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

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

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

Espero que esto ayude :)

Artículos relacionados