使用 Mongoose 和 Redux 删除记录答案

【问题标题】：Deleting a record using Mongoose with Redux使用 Mongoose 和 Redux 删除记录
【发布时间】：2018-03-14 13:29:52
【问题描述】：

当用户按下给定记录的按钮时，我想删除我的 mongoDB 中的记录。供参考：

我已经设置了所有的 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);
    });
  });

记录列表正在基于组件的反应组件中呈现。我正在像这样导入我的操作：

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

并且在按钮的 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);

【问题讨论】：

你的组件连接了吗？动作是否映射？
我认为它没有正确连接以达到 deleteSurvey 操作。我已经在我的原始帖子中添加了代码。
需要在fetchSurveys旁边添加deleteSurvey：export default connect(mapStateToProps, { fetchSurveys, deleteSurvey })(SurveyList);
我收到一条新的错误消息。我已将其包含在我的帖子中。
好的，这意味着旧的错误现在已修复，调查的类型是什么？因为 map 只适用于数组

标签： node.js mongodb reactjs mongoose redux

【解决方案1】：

您需要使用React-Redux's connect 高阶函数将操作映射到您的组件。

注意：这不是你应该编写代码的方式，只是为了演示

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

【讨论】：

感谢您的回答，但我不确定如何在我的连接功能中正确实现这一点。为什么你有“const SomeComponent”而不是导出默认值？
这只是虚拟代码，而不是您应该如何在代码中实现。理想情况下，您应该使用 connect 包装您的组件，然后导出为容器组件。
您是否在虚拟代码中使用 connect 包装组件？容器组件是什么意思？

【解决方案2】：

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

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

编辑：您的第二个错误来自 map 仅适用于数组这一事实，因此您需要确认 surveys 是一个您可以使用的数组：console.log(this.props.surveys)

【讨论】：

谢谢，我解决了！原来我的路由不正确。我必须为我的查询参数提供：${id} 并用 async 和 await 标记我的路由处理程序。