javascript - 未定义React调度删除操作

我的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 }));
        })
    }
};

最佳答案

您的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创建器。