React-Graphql中删除帖子按钮失效问题求助

问题1：useNavigate 未正确调用 #

你直接将钩子函数本身赋值给变量，没有执行调用，导致无法获取导航方法：

// 错误写法
const navigate = useNavigate;
// 正确写法
const navigate = useNavigate();

问题2：帖子ID获取逻辑错误 #

组件声明接收postId props，但实际误用useParams()从路由取ID——Feed是列表页，每个帖子的ID应该由父组件通过props传递，而非依赖路由参数。修改DeletePostBtn：

function DeletePostBtn ({ postId }){
  const navigate = useNavigate();
  // 删除：const { _id } = useParams();

  // 变量名需与GraphQL Mutation定义一致，比如后端Mutation是`removePost(id: ID!)`就用id
  const [deletePost] = useMutation(REMOVE_POST, {
    variables: { id: postId },
    onCompleted: () => navigate('/'),
    refetchQueries: [{ query: QUERY_POSTS }],
  });
    
  const removeHandler = async () => {
    // 按钮点击无需preventDefault，删除该行
    try {
      await deletePost(); // 已在useMutation中定义变量，无需重复传递
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <Button onClick={removeHandler}>
      <Trash/>
   </Button>  
  );
}

问题3：Feed页面组件调用错误 #

1. 组件名不匹配：定义的组件是DeletePostBtn，但Feed里写的是<DeletePost />，需统一名称
2. 未传入帖子ID：必须将遍历的当前帖子_id通过props传给删除组件

修改Feed中的Dropdown部分：

<Dropdown.Item onClick={(e) => e.preventDefault()}> {/* 阻止默认跳转行为 */}
  <Stack direction="horizontal">
    <DeletePostBtn postId={post._id} />
    DELETE
  </Stack>
</Dropdown.Item>

额外排查建议 #

• 核对GraphQL REMOVE_POST mutation的变量名，确保前后端一致
• 打开浏览器控制台，查看是否有JS报错或GraphQL请求错误
• 确认后端是否对帖子删除做了权限校验，当前用户是否有权限操作

内容的提问来源于stack exchange，提问作者Oiicrow