Question

我的actionFormatter出现问题。

当我单击DELETE按钮时，出现错误：

未捕获的ReferenceError：在onClick上未定义调度

如何解决此问题？

import { removeEnvironnement } from '../../actions/environnement';
const EnvironnementList = (props) => (

            <BootstrapTable 
                keyField='id' 
                data={ props.store.environnements } 
                columns={ columns }
                selectRow={selectRow} 
                pagination={ paginationFactory() } 
                filter={ filterFactory() } 
                striped hover condensed
              />
);

const actionsFormatter  = (cell, row) => {
    const id=row.id
    return (
            <button className="btn btn-danger" 
                onClick={() => {
                     dispatch(removeEnvironnement({ id }));}}
            >Delete</button>
    );
};

const columns = [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'nom',
    text: 'Nom',
    filter: textFilter()
}, {
    dataField: 'actions',
    text: 'Action',
    formatter: actionsFormatter
} ];


const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    bgColor: '#00BFFF'
};


const mapStateToProps = (state) => {
    return {
        store: state
    };
}

export default connect(mapStateToProps)(EnvironnementList);

这是我执行删除操作的代码：我应该删除调度部分吗？

const _removeEnvironnement = ({ id } = {}) => ({
    type: 'REMOVE_ENVIRONNEMENT',
    id
});

export const removeEnvironnement = ({ id } = {}) => {
    return (dispatch) => {
        return axios.delete(`environnements/${id}`).then(() => {
            dispatch(_removeEnvironnement({ id }));
        })
    }
};

Answer 1

您必须使用dispatch方法链接组件。

由于您已经在使用react-redux将组件连接到Redux存储，因此可以通过将dispatch映射到props来轻松地做到这一点。

只需添加以下内容：

const mapStateToProps = (state) => {
    return {
        store: state
    };
}

const mapDispatchToProps = dispatch => {
    return {
        removeEnvironnement: id => {
             dispatch(removeEnvironnement({ id }));
        }
    }
}

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

然后在您的onClick处理程序中，只需调用this.props.removeEnvironnement(id)

Answer 2

您的dispatch中的actionsFormatter是什么？既没有在actionsFormatter范围内定义，也没有在actionsFormatter范围之外定义。那就是问题，那是您正在谈论的javascript解释器。

可能的解决方法之一是导入您的redux存储区

store.js

export const store = createStore(...)

EnvironmentList.js

import { store } from './path/to/store.js'

// ...

const actionsFormatter  = (cell, row) => {
    const { dispatch } = store
    const id = row.id
    // ...
};

这样，您将在dispatch正文中获得actionsFormatter。

另一种方法是通过connect-> EnvironmentList-> actionsFormatter链提供映射方法。按照Arnaud Christ的建议in his reply，然后重构代码：

const EnvironmentList = (props) => (

            <BootstrapTable 
                keyField='id' 
                data={ props.store.environnements } 
                columns={ columns(props.removeEnvironment) }
                selectRow={selectRow} 
                pagination={ paginationFactory() } 
                filter={ filterFactory() } 
                striped hover condensed
              />
);

const actionsFormatter = (removeEnvironment) => (cell, row) => {
    const id=row.id
    return (
            <button className="btn btn-danger" 
                onClick={() => {
                     removeEnvironment({ id });
                }}
            >Delete</button>
    );
};

const columns = (removeEnvironment) => [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'nom',
    text: 'Nom',
    filter: textFilter()
}, {
    dataField: 'actions',
    text: 'Action',
    formatter: actionsFormatter(removeEnvironment)
} ];

因此，连接的EnvironmentList在其道具上获得了必要的removeEnvironment方法。然后我们将其传递给专栏创建者，然后将其传递给actionsFormatter创建者。

未定义React调度移除动作

2 个答案: