如何使用mern删除特定id的帖子？

Question

我试图删除特定id的帖子，但它给我错误为：代理错误：无法代理请求 /api/posts从localhost:3001http://localhost:8000。有关更多信息，请参阅https://nodejs.org/api/errors.html#errors_common_system_errors（ECONNREFUSED）。

这是我的行动：

export const deletePost = (id) => async (dispatch) => {
  try {
    dispatch({
      type: DELETE_POST_LOADING,
    });
    const res = await axios.delete(`/api/post/${id}`);
    dispatch({
      type: DELETE_POST_SUCCESS,
      payload: { id: id },
    });
  } catch (error) {
    dispatch({
      type: DELETE_POST_FAIL,
      payload: error,
    });
  }
};

这是我的减速机：

case DELETE_POST_SUCCESS:
      const new_data = state.posts;

      const item_index = new_data.findIndex(
        (element) => element.id === action.payload.id
      );
      new_data.splice(item_index, 1);

      return {
        loading: false,
        posts: new_data,
      };

这是我的组件中使用的代码：

 const handleDelete = (id) => {
    setItemId(id);
    id && itemId != null && dispatch(deletePost(itemId));
  };

这是我的post控制器，它也没有获取id的数据

const getSinglePost = async (req, res) => {
  const _id = req.params;
  console.log(id);
  const article = await Post.findById({ _id });
  res.json(article);
  if (article) {
    console.log("Fetched data with id");
  } else {
    console.log("Didnot fetched");
  }
};

用户界面代码

import React, { useState, useEffect } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { useDispatch, useSelector } from "react-redux";
import { getPost, deletePost } from "../../actions/postAction";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import "./Dashboard.css";
import { useHistory } from "react-router";
import { Button } from "@material-ui/core";
const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);

const useStyles = makeStyles({
  table: {
    minWidth: 700,
  },
});

export default function CustomizedTables() {
  const classes = useStyles();
  const [articles, setArticles] = useState([]);
  const [itemId, setItemId] = useState("");

  const dispatch = useDispatch();
  const articleState = useSelector((state) => state.post_Reducer);

  useEffect(() => {
    dispatch(getPost());
  }, []);

  useEffect(() => {
    const data = articleState.posts;
    console.log("aayo", data);
    setArticles(data);
  }, [articleState]);

  const history = useHistory();
  const logout = () => {
    localStorage.removeItem("userInfo");
    history.push("/");
  };

  function passID(id) {
    console.log("itemid", id);
    history.push({
      pathname: `/article/${id}`,
    });
  }

  const handleDelete = (id) => {
    dispatch(deletePost(id));
  };

  return (
    <>
      <div className="navigationButtons">
        <Button variant="contained" color="secondary" onClick={logout}>
          Logout
        </Button>
        <Button variant="contained" onClick={() => history.push("/createpost")}>
          Create New Article
        </Button>
      </div>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="customized table">
          <TableHead>
            <TableRow>
              <StyledTableCell
                style={{ width: "150px" }}
                className="tableRow"
                align="left"
              >
                ID
              </StyledTableCell>
              <StyledTableCell className="tableRow" align="left">
                Title
              </StyledTableCell>
              <StyledTableCell className="actionRow" align="center">
                Action
              </StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {articles?.map((article) => (
              <StyledTableRow key={article._id}>
                <StyledTableCell
                  className="dataRow"
                  align="left"
                  component="th"
                  scope="row"
                >
                  {article._id}
                </StyledTableCell>
                <StyledTableCell className="dataRow" align="left">
                  {article.title}
                </StyledTableCell>
                <StyledTableCell className="actionRow" align="center">
                  <td className="actions">
                    <VisibilityIcon
                      onClick={() => passID(article._id)}
                      style={{ color: "green", fontSize: "20px" }}
                    />
                    <EditIcon style={{ color: "blue", fontSize: "20px" }} />
                    <DeleteIcon
                      onClick={() => {
                        handleDelete(article._id);
                      }}
                      style={{ color: "red", fontSize: "20px" }}
                    />
                  </td>
                </StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

有人能帮我吗？

Answer 1

您需要刷新页面/重新加载应用程序的原因是由于减速器中的状态突变。

case DELETE_POST_SUCCESS:
  const new_data = state.posts; // <-- new_data is reference to state

  const item_index = new_data.findIndex(
    (element) => element.id === action.payload.id
  );
  new_data.splice(item_index, 1); // array.splice mutates array in place

  return {
    loading: false,
    posts: new_data, // <-- save posts state reference back into state
  };

在React中更新状态时，必须始终返回新的引用对象，在本例中为数组。只需过滤posts数组。不要忘记也浅复制现有状态，除非您特别删除部分状态。

case DELETE_POST_SUCCESS:
  return {
    ...state
    loading: false,
    posts: state.posts.filter((element) => element.id !== action.payload.id),
  };

Answer 2

Can u try like this 
const getSinglePost = async (req, res) => {
  const id = req.params.id;
  console.log(id);
  const article = await Post.findById({_id:id});
  res.json(article);
  if (article) {`enter code here`
    console.log("Fetched data with id");
  } else {
    console.log("Didnot fetched");
  }
};