Question

我的组件代码的一部分，其中在componentDidMount中调用tableList函数，操作代码也在下面。

在调用this.props.tableList时发生错误不是一个函数，不知道为什么因为连接第二个param mapDispatchToProps正在返回bindActionCreators，它通过connect将action tableList绑定到这个组件，并且任何帮助都会很多赞赏。

求助已将export default connect(null, mapDispatchToProps)(CreateGenericTable)更改为const CreateGenericTableRedux = connect(null, mapDispatchToProps)(CreateGenericTable)，它开始正常工作。

    import { bindActionCreators } from 'redux';
    import { tableList } from '../../actions/index.js'

    class CreateGenericTable extends Component {    

        constructor(props){
            super(props);
            //const {dispatch} = props;
            this.state = {  rows:null, columns:null, idselected:null, view:null};
            //this.handleClick.bind(this,id,this.props.editform)
        }   

       componentDidMount(){

            var token = getCookie('admin_session_token');
            servicerequest = this.props.serviceRequest;

            this.props.tableList(this.props.service,token,servicerequest,this.props.columns)

            $.ajax({
                type: "POST",
                url: this.props.service,
                crossDomain: true,
                dataType: 'jsonp',
                xhrFields: {
                    withCredentials: true
                },
                data: { 
                    q: JSON.stringify({
                        [servicerequest]:{}
                    }),
                    admin_session_token:token, 
                },
                success : (data) => {

                        var data = data[servicerequest];//var data = data['News_get'];

                        if(data.length>0){
                            var news_formated = [];
                            var listofkeys = Object.keys(data[0]);

                            for(var new_unformated of data){

                                var new_formated = [];

                                for(var key of listofkeys){

                                    //console.log(key);
                                    if(this.props.editform.indexOf('EditHeader') !== -1 && key.indexOf('language_items') !== -1){
                                        new_formated['image'] = new_unformated[key][0]['image'];
                                        new_formated['link'] = new_unformated[key][0]['link'];
                                    }else{

                                        if(this.props.editform.indexOf('EditNotification') !== -1){
                                            if(key.indexOf('params') !== -1){
                                                new_formated[key] = new_unformated[key]['message'];
                                            }else{
                                                new_formated[key] = new_unformated[key];
                                            }
                                        }else{
                                            if(key.indexOf('active') !== -1){
                                                if(new_unformated[key].indexOf('1') !== -1){
                                                    new_formated[key] = 'Yes';
                                                }else{
                                                    new_formated[key] = 'No';
                                                }
                                            }else{
                                                new_formated[key] = new_unformated[key];
                                            }
                                        }

                                    }


                                }

                                news_formated.push(new_formated);

                            }
                            var columns_get = this.props.columns;//listofkeys;
                            return this.setState({rows:news_formated,columns:columns_get});
                    }else{
                        var columns_get = this.props.columns;
                        return this.setState({rows:null,columns:columns_get});
                    }
                },

                error: (xhr, status, err) =>{
                    ////console.log('ups somehting went rong:'.err.toString());
                },


            });
        }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({ tableList }, dispatch);
}

export default connect(null, mapDispatchToProps)(CreateGenericTable)

----------------------------------------------- -------------------------------------行动------------ ------------------------

export const FETCH_TABLEDATA = 'FETCH_TABLEDATA'
export const EDIT_COMP = 'EDIT_COMP'

export function tableList(service,token,serviceRequest,columns){

    var request = null;

    $.ajax({
        type: "POST",
        url: service,
        crossDomain: true,
        dataType: 'jsonp',
        xhrFields: {
            withCredentials: true
        },
        data: { 
            q: JSON.stringify({
                [servicerequest]:{}
            }),
            admin_session_token:token, 
        },
        success : (data) => {   
            request = data;
        },

        error: (xhr, status, err) =>{
            ////console.log('ups somehting went rong:'.err.toString());
        },

    });             

    return {
        type: FETCH_TABLEDATA,
        payload: {request: request, serviceRequest: serviceRequest, columns: columns}
    };
}

减速

import { FETCH_TABLEDATA } from '../actions/index.js'

//const INITIAL_STATE = {rows:null, columns:[]}

export default function(state = [], action){
    switch(action.type){
        case FETCH_TABLEDATA:
            var new_formated = [];
            var data = action.payload.request[action.payload.servicerequest];//var data = data['News_get'];

            if(data.length>0){
                var news_formated = [];
                var listofkeys = Object.keys(data[0]);

                for(var new_unformated of data){

                    for(var key of listofkeys){

                        //console.log(key);
                        if(this.props.editform.indexOf('EditHeader') !== -1 && key.indexOf('language_items') !== -1){
                            new_formated['image'] = new_unformated[key][0]['image'];
                            new_formated['link'] = new_unformated[key][0]['link'];
                        }else{

                            if(this.props.editform.indexOf('EditNotification') !== -1){
                                if(key.indexOf('params') !== -1){
                                    new_formated[key] = new_unformated[key]['message'];
                                }else{
                                    new_formated[key] = new_unformated[key];
                                }
                            }else{
                                if(key.indexOf('active') !== -1){
                                    if(new_unformated[key].indexOf('1') !== -1){
                                        new_formated[key] = 'Yes';
                                    }else{
                                        new_formated[key] = 'No';
                                    }
                                }else{
                                    new_formated[key] = new_unformated[key];
                                }
                            }

                        }


                    }

                    news_formated.push(new_formated);

                }
                return {rows:news_formated, columns:action.payload.columns};
            }else{
                return {rows:null, columns:action.payload.columns};
            }
            //{...state, {rows:null, columns:action.payload.columns}};
        default:
            return state;
    }
}

Answer 1

请检查 mapDispatchToProps 。

function mapDispatchToProps(dispatch){
    return {
      actions: bindActionCreators(actionsCreators, dispatch);
    }
}

您可以发送

等操作

this.props.actions.fn()

您正在执行API调用（异步操作）。请使用redux-thunk与异步操作后相同，您必须进行一些状态更改。这需要一些时间来改变。

使用react-reactx的连接但是this.props.tableList中的错误不是函数

1 个答案: