我有react / redux 组件:
import React, { Component } from 'react';
import { connect } from "react-redux";
import _ from 'lodash';
import {
onDeleteItem,
onChangeItemState
} from '../actions/actions.js'
import {
Button
} from 'reactstrap';
const mapStateToProps = state => ({
trStore: state
});
class Contenttr extends Component {
deleteItem() {
this.props.onDeleteItem(this.props.id);
}
changeItem() {
this.props.onChangeItemState(this.props.id);
}
render() {
return (
<tr>
<td className="text-center"><img src="http://via.placeholder.com/100x50" alt="Logo" /></td>
<td className="text-center">{this.props.keywords}</td>
<td className="text-center">{this.props.place}</td>
<td className="text-center"><Button color="danger" size="sm" onClick={this.deleteItem.bind(this)}>Delete</Button></td>
<td className="text-center"><Button color="primary" size="sm" onClick={this.changeItem.bind(this)}>Change</Button></td>
</tr>
);
}
}
export default connect(mapStateToProps, { onDeleteItem, onChangeItemState })(Contenttr);
我制作了 API ,以从mongodb(猫鼬)中删除项目:
router.route('/items/:item_id')
// delete the item with this id (accessed at DELETE http://localhost:3001/api/item/:item_id)
.delete(function(req, res) {
Item.remove({
_id: req.params.item_id
}, function(err, item) {
if (err)
res.send(err);
res.json({ message: 'Successfully deleted' });
});
});
在我的减速器中,我通过这种方式将其从状态中删除:
else if (action.type === "DELETE_ITEM") {
const delId = action.id;
const filtered = _.filter(state.filtered,(o) =>
o.id !== delId
);
const itemsList = _.filter(state.filtered,(o) =>
o.id !== delId
);
// console.log('DELETE_ITEM', filtered, "delId", delId);
return {
...state,
filtered,
itemsList
}
我的操作文件如下所示:
export function onDeleteItem(id) {
return (dispatch) => {
axios.delete(`http://localhost:3001/api/items/:${id}`)
.then(res => {
dispatch({type:"DELETE_ITEM", id: id});
})
}
}
我面临的问题是,要使用操作删除项目,我需要使用onDeleteItem函数将_id从组件传递到操作。但是基本的this.props._id
向我显示了undefined
。如何获取此_id或正确重写API?