使用 Mongoose 和 Redux 删除记录

Posted 2023-03-07

【中文标题】使用 Mongoose 和 Redux 删除记录

【英文标题】：Deleting a record using Mongoose with 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 只适用于数组

【参考方案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 标记我的路由处理程序。