使用Mongoose和Redux删除logging

当用户按下给定logging的button时，我想删除我的mongoDB中的logging。 以供参考：

我有我所有的mongoose和redux代码设置，但我得到这个错误：

这是我的行动：

//deletes a survey when user clicks button export const deleteSurvey = (surveyId) => async dispatch => { const response = await axios.delete("/api/surveys", surveyId); dispatch({ type: FETCH_SURVEYS, payload: response.data }); }; 

这是我的路由处理程序：

 app.delete("/api/surveys", requireLogin, (req, res) => { Survey.findByIdAndRemove(req.surveyId, (err, survey) => { let response = { message: "Survey successfully deleted", }; res.status(200).send(response); }); }); 

logging列表在基于组件的反应组件内呈现。 我正在导入我的动作，如下所示：

 import { deleteSurvey } from "../../actions"; 

并且button的onClick事件触发对该操作的调用：

 <button onClick={() => this.props.deleteSurvey(survey._id)} className="btn-floating btn-large red" > <i className="material-icons">clear</i> </button> 

我如何解决这个错误？

编辑：组件连接

 function mapStateToProps({ surveys }) { return { surveys }; //returns the surveys reducer from the combined reducers } export default connect(mapStateToProps, { fetchSurveys })(SurveyList); 

编辑：新的错误消息

这是指：

 return this.props.surveys.map(survey => {...} 

编辑：从API获取调查

 const surveys = await Survey.find({ _user: req.user.id }) //get all surveys for the current user .select({ recipients: false }); //dont include recipients res.send(surveys); 

Answer 1

您尚未将您的操作连接到您的组件：

 export default connect(mapStateToProps, { fetchSurveys, deleteSurvey })(SurveyList); 

编辑：你的第二个错误来自这样的事实，即地图只能在数组上工作，所以你需要确认surveys是一个你可以使用的数组： console.log(this.props.surveys)

Answer 2

您需要使用React-Redux的connect高阶function来将动作映射到您的组件。

注意：这不是你应该如何编写代码，只是为了演示

 import React from 'react'; import { connect } from 'react-redux'; import { deleteSurvey } from "../../actions"; const SurveyList = ({ survey, handleDeleteSurvey }) => { return <div> <button onClick={() => handleDeleteSurvey(survey._id)} className="btn-floating btn-large red" > <i className="material-icons">clear</i> </button> </div> } const mapStateToProps = ({ surveys }) => { return { surveys } } const mapDispatchToProps = dispatch => { return { //note that this code assumes deleteSurvery is a thunk handleDeleteSurvey: id => dispatch(deleteSurvey(id)) } } export default connect(mapStateToProps, mapDispatchToProps)(SurveyList);