Reactjs 使用React、Redux和Express从MongoDB中删除项

我试图使用React、Redux和Express/Node从MongoDB数据库中删除订单行，但在控制台中出现以下错误：

VM118:1 DELETE http://localhost:3000/api/meals/:id/jp4PaZve3 404 (Not Found) 

我不知道为什么它指向端口3000，而我的本地服务器运行在5000上

在我的服务器文件中，我在Express中创建了以下删除端点

app.delete("/api/meals/:id", async (req, res) => {
  const deletedMeal = await Meal.findByIdAndDelete(req.params.id);
  res.send(deletedMeal);
});

在我的redux操作中，我有以下内容（我不确定这是否正确）：

我的UpdateNu屏幕如下所示：

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMeals, deleteMeal } from "../actions/mealActions";

class UpdateMenuScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meal: null,
    };
  }

  componentDidMount() {
    this.props.fetchMeals();
  }

  deleteMeal(id) {
    this.props.deleteMeal(id);
  }

  render() {
    return (
      <div>
        <h3>Current Menu</h3>
        {!this.props.meals ? (
          <div>Loading...</div>
        ) : (
          <ul className="meals">
            {this.props.meals.map((meal) => (
              <li key={meal._id}>
                <div className="meal">
                  <p>{meal.title}</p>
                  <button
                    className="button"
                    onClick={() => this.props.deleteMeal(meal._id)}
                  >
                    Delete
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
        <button>Add New Menu Item</button>
      </div>
    );
  }
}

export default connect((state) => ({ meals: state.meals.items }), {
  fetchMeals,
  deleteMeal,
})(UpdateMenuScreen);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“./actions/mealActions”导入{fetchfines，deletemine}；
类UpdateMenuScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
餐：空，
};
}
componentDidMount（）{
this.props.fetchFounds（）；
}
删除膳食（id）{
this.props.deletemine（id）；
}
render（）{
返回(
当前菜单
{！这个。道具。餐点(
加载。。。
) : (

{this.props.fines.map（（fine）=>(

{MEIN.title}

this.props.deleteMedine（mean.\u id）}
>
删除

))}

)}
添加新菜单项
);
}
}
导出默认连接（（状态）=>（{fines:state.fines.items}）{
吃饭,，
他吃了一顿饭，
})（更新屏幕）；

---

但是，当我尝试在Postman中运行delete方法时，它不起作用。有人能看出我做错了什么吗？

在deleteDine操作中，必须使用模板字符串动态地将id放入URL中

await fetch("/api/meals/:id/" + id

1) it's equal to /api/meals/:id/id but according to your backend it should be /api/meals/:id
2) and you have to put the whole URL like http://localhost:5000/api/meals/${id} cause if you don't put the base, it will do a request on the port of your client so 3000

///////

因此，不是：

export const deleteMeal = (id) => async (dispatch) => {
  await fetch("/api/meals/:id/" + id, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};

试试这个：

export const deleteMeal = (id) => async (dispatch) => {
  await fetch(`http://localhost:5000/api/meals/${id}/`, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};

---

非常感谢。我最终使用了wait-fetch（

/api/fines/${id}/

由于我之前将此应用程序推送到heroku，我认为服务器端口变得混乱，但我现在需要这样做。我现在注意到，当我删除一个项目时，页面不会重新加载以显示FetchFounds列表中的剩余项目，它会显示Loading…，而应该只在FetchFounds道具打开时显示Loading空。你知道这可能是什么原因吗？如果我导航到另一个页面，然后返回，整个列表将再次呈现。我尝试在deleteMedine函数中调用我的FetchFines请求，如下所示：deleteMedine（id）{this.props.deleteMedine（id）；this.props.fetchFines（）；}@如果你愿意，我们可以私下谈谈chat@smose我在这里创建了一个聊天室@Versification抱歉，我没有及时看到您的聊天室，我现在通过添加componentDidUpdate（）{this.props.fetchFines（）}解决了这个问题

export const deleteMeal = (id) => async (dispatch) => {
  await fetch(`http://localhost:5000/api/meals/${id}/`, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};