Comencé a codificar una interfaz web para administrar los archivos de mi servidor usando React / Redux.
Ahora tengo una página que solicita a mi API obtener la lista de archivos como JSON.

Funciona bien, obtuve mi página con una lista de todos mis archivos del servidor. Pero la acción de seleccionar archivo falla con el siguiente error:

TypeError: _this2.props.selectFile no es una función

Aquí está mi código :

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {Provider, connect} from 'react-redux';
import thunk from 'redux-thunk';
import activeFileReducer from './reducers/reducer-active-file';
import dataListReducer from './reducers/reducer-data';

const reducer = combineReducers({
    datalist: dataListReducer, 
    activefile: activeFileReducer
})
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let store = createStoreWithMiddleware(reducer);
ReactDOM.render(<Provider store={store}>
    <App />
    </Provider>, document.getElementById('table'));

Reductor de datos

export default function datalist (state = [], action) {
    switch (action.type) {
        case "FETCH_REQUEST":
            return state;
        case "FETCH_SUCCESS": 
            return action.payload || [];
        default:
            return state;
    }
}

Reductor-archivo-activo

export default function activefile (state= {}, action){
        switch(action.type){
            case "FILE_SELECTED":
                return action.payload;
            default:
                return state;
        }

    }

Actions / index.js

export const selectFile = (file) => {
    return {
        type: "FILE_SELECTED",
        payload: file
    }
}


export const fetchDataRequest = () =>{
    return {
      type: "FETCH_REQUEST"
    }
}

export const fetchDataSuccess = (payload) => {
    return {
        type: "FETCH_SUCCESS",
        payload
    }
}

export const fetchDataError = () => {
    return {
        type: "FETCH_ERROR"
    }
}

Contenedor de lista de datos

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchDataRequest, fetchDataSuccess, fetchDataError, selectFile} from '../actions/index';

class DataList extends Component{
    componentDidMount(){
        this.props.fetchDataWithRedux()

    }

    render(){
        return(
            <ul>
                {
                    this.props.datalist && 
                    this.props.datalist.map((item, key) =>{
                        return(
                            <li key={key} onClick={() => this.props.selectFile(item)}>{item.title}</li>
                        )
                    })
                }
            </ul>
        )       
    }
}


function fetchDataWithRedux() {
    return (dispatch) => {
        dispatch(fetchDataRequest());
        return fetchData().then(([response, json]) =>{
            console.log(response);
            if(response.status === 200){
            dispatch(fetchDataSuccess(json))
            dispatch(selectFile())
    }
    else{
        dispatch(fetchDataError())
        dispatch(selectFile())
    }
    })
}
}

function fetchData() {
const URL = "http://localhost:5000/api/deposit/view";
return fetch(URL, { method: 'GET'})
    .then( response => Promise.all([response, response.json()]));
}

function mapStateToProps(state){
    return {
        datalist: state.datalist
    }
}

export default connect(mapStateToProps, {fetchDataWithRedux})(DataList);
2
AlexAR 19 feb. 2018 a las 16:12

2 respuestas

La mejor respuesta

Debido a que no está pasando la función selectFile al componente en los accesorios, aquí:

export default connect(mapStateToProps, {fetchDataWithRedux})(DataList);

Pase selectFile de la misma manera que pasa fetchDataWithRedux, use esto:

export default connect(mapStateToProps, {fetchDataWithRedux, selectFile})(DataList);
1
Mayank Shukla 19 feb. 2018 a las 13:29

Puede usar selectFile directamente en lugar de vincularlo a accesorios cuando los haya importado a su componente.

<li key={key} onClick={() => selectFile(item)}>{item.title}</li>

Simplemente elimine this.props. prefijado para selectFile

0
Aditya 19 feb. 2018 a las 13:19