Question

我正在连接我的组件，并绑定我的actionCreators。这是我在一个有效的组件上采用的类似模式。我正在使用react-table来调用我的click事件，但是我在表外调用redux动作，试图不受任何干扰。这是我的组件代码：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import ReactTable from "react-table";
import {withRouter} from 'react-router-dom';
import {bindActionCreators} from 'redux';
import {goToBook} from '../actions/index';

export class RoutingDnD extends Component{
    constructor(props) {
        super(props);

        this.state = {

        };

        this.onPassBook = this.onPassBook.bind(this);
    }

    onPassBook(val){
        this.props.goToBook(val, this.props.history);
    }

    render() {
        if(!this.props.routingBooks ){
            return <div>Books not loaded</div>;
        }
console.log(this.props.goToBook)
        return (
            <div>
            <ReactTable
                data={this.props.routingBooks}
                showPagination={false}
                sortable= {true}
                multiSort={true}
                getTrProps={( state, rowInfo, column, instance) => ({
                    onClick: e => {
                        this.onPassBook(rowInfo.row['base.ItemKey']);
                    }
                })}
                columns={[
                    all of my column code was here...]}

                SubComponent={row => {
                    return (
                        <div style={{ padding: "5px" }}>

                            <ReactTable
                                data={row.original.inventory.warehouses}
                                defaultPageSize={row.original.inventory.warehouses.length}
                                columns={[
                                    ...more column code
                                ]}
                                showPagination={false}
                            />
                        </div>
                    );
                }}

                defaultSorted={[
                    {
                        id: "Title",
                        desc: true
                    }
                ]}
                className="-striped -highlight"
                />
            </div>
        );
    }
}
function mapDispatchToProps(dispatch){
    return {
        goToBook: bindActionCreators(goToBook, dispatch)
    }
}

function mapStateToProps(state){
    return{
        routing: state.activeRouting,
        routingBooks: state.routingBooks
    };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RoutingDnD))

看来我的goToBook函数总是返回undefined：

未捕获的TypeError：this.props.goToBook不是函数在RoutingDnD.onPassBook（bundle.js：42656） at onClick（bundle.js：42457）在HTMLUnknownElement.callCallback（bundle.js：65435） at Object.invokeGuardedCallbackDev（bundle.js：65474） at Object.invokeGuardedCallback（bundle.js：65331） at Object.invokeGuardedCallbackAndCatchFirstError（bundle.js：65345）在executeDispatch（bundle.js：65729） at executeDispatchesInOrder（bundle.js：65748） at executeDispatchesAndRelease（bundle.js：65849）在executeDispatchesAndReleaseTopLevel（bundle.js：65860）

我不知道为什么，我在connect中调用了mapDispatchToProps，我正在导入我的goToBook动作，并且我将它绑定到bindActionCreators。

以下是我在actions / index.js中的调用：

export const GO_TO_BOOK = 'GO_TO_BOOK';
export function goToBook(book, history) {
    history.push(`/bis/landing/book/${book}`);
    return {
        type: GO_TO_BOOK,
        payload: book

    }
}

我的减速机：

import {GO_TO_ROUTING} from "../actions/index";

const defaultState = {
    routingID:0,
    versionID: 0
};
export default function(state = defaultState, action){
    switch(action.type){
        case GO_TO_ROUTING:
            return {...state, routingID: action.payload.routingID, versionID: action.payload.versionID};
    }
    return state
}

Answer 1

我通过使用此bindActionCreator并将其放入我的父级来实现它。然后我将这个函数传递给我的子组件并且它工作了。谢谢您的帮助。

编辑：我还将withRouter移出了孩子，只是将孩子的数据传递给了父母，让父母处理了bindActionCreator。这完全奏效了。子进程中的bindActionCreators和withRouter都失败了。

bindActionCreators的唯一用例是当你想传递一些时动作创建者到一个不知道Redux的组件和你不希望将调度或Redux存储传递给它

这是你的链接@Eric Hasselbring。非常感谢。

bindActionCreators没有生成函数

1 个答案: