Javascript 未定义React dispatch移除操作

我的操作格式有问题

单击“删除”按钮时，会出现以下错误：

未捕获引用错误：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);

---

您必须使用

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.removeenvironment（id）

就可以将组件链接到

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.removeenvironment（id）

在

操作表单中的
分派
是什么？它既不在
actionsformter
范围内定义，也不在
actionsformter
范围外定义。这就是问题所在，这就是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
    // ...
};

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


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

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)
} ];

const环境列表=（道具）=>(
);
常量操作格式=（removeEnvironment）=>（单元格，行）=>{
const id=row.id
返回(
{
移除环境（{id}）；
}}
>删除
);
};
常量列=（removeEnvironment）=>[{
数据字段：“id”，
文本：“ID”
}, {
数据字段：“nom”，
文本：“Nom”，
过滤器：textFilter（）
}, {
数据字段：“操作”，
文本：“行动”，
格式化程序：操作格式化程序（removeEnvironment）
} ];

因此，connected EnvironmentList在其道具上获得了必要的removeEnvironment方法。然后我们将其传递给columns creator，columns creator将其传递给Actions Format creator。
您的
Actions Format
中的
dispatch
是什么？它既不在
actionsformter
范围内定义，也不在
actionsformter
范围外定义。这就是问题所在，这就是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
    // ...
};

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


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

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)
} ];

const环境列表=（道具）=>(
);
常量操作格式=（removeEnvironment）=>（单元格，行）=>{
const id=row.id
返回(
{
移除环境（{id}）；
}}
>删除
);
};
常量列=（removeEnvironment）=>[{
数据字段：“id”，
文本：“ID”
}, {
数据字段：“nom”，
文本：“Nom”，
过滤器：textFilter（）
}, {
数据字段：“操作”，
文本：“行动”，
格式化程序：操作格式化程序（removeEnvironment）
} ];

因此，connected EnvironmentList在其道具上获得了必要的removeEnvironment方法。然后我们将其传递给columns creator，columns creator将其传递给Actions Format creator。
谢谢，但当我制作时：this.props.removeenEnvironment（id）。我有：UncaughtTypeError:无法读取undefinedIt的属性“props”，这取决于您的需要。只要用
connect
HOC和
mapDispatchToProps
作为参数包装任何组件，它就可以在自己的
props
中访问
removeenvironment
。谢谢，但当我创建时：this.props.removeenvironment（id）。我有：UncaughtTypeError:无法读取undefinedIt的属性“props”，这取决于您的需要。只需使用
connect
HOC和
mapDispatchToProps
作为参数包装任何组件，它就可以在自己的
道具中访问
RemoveEnvironment
。