reactjs 如何使用react useMutation和useNavigate在成功提交请求后导航到不同的页面

2mbi3lxu 于 5个月前发布在 React

关注(0)|答案(1)|浏览(76)

似乎它导航到我想要的页面，并在瞬间重定向回我提出的帖子请求的页面。
我尝试在useMutation中使用onSuccess选项。我还尝试有条件地使用mutation.isSuccess来尝试和导航。如果我在单击函数中尝试navigate('/')，它会导航回我的主页，但不会显示post请求所做的更改。

import {useMutation} from "@tanstack/react-query";
import axios from "axios";
import {API_URL} from "../apis/consts.js";
import {useNavigate} from "react-router-dom";
export const useCreateBlogPost = () => {
    const navigate = useNavigate();
    return useMutation({
        mutationFn: (post) => {
            return axios.post(API_URL+'posts', post)
        },
        onSuccess: () => {
            navigate('/')
        }
    })
}

个字符

reactjs

来源：https://stackoverflow.com/questions/77760494/how-to-use-react-usemutation-and-usenavigate-to-navigate-to-a-different-page-aft

1条答案

按热度按时间

pieyvz9o1#

这个按钮是提交表单，它会重新加载页面，* 当前页面 *。你需要在提交表单时阻止默认的表单操作。

export const BlogPostForm = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [author, setAuthor] = useState('');

  const mutation = useCreateBlogPost();

  const handleSubmit = (e) => {
    e.preventDefault(); // <-- prevent default form action

    mutation.mutate({
      title,
      body: content,
      author,
      date: getDate()
    });
  }

  return (
    <div>
      <Link to="/">
        <h1 className={"blog-name"}>Blog Site 📖</h1>
      </Link>
      <form
        className={"blog-post-form"}
        onSubmit={handleSubmit} // <-- use form submit handler
      >
        <label className="label-title">
          Title:
          <input
            type="text"
            value={title}
            onChange={handleInputChange(setTitle)}
          />
        </label>
        <label className="label-content">
          Content:
          <input
            type="text"
            value={content}
            onChange={handleInputChange(setContent)}
          />
        </label>
        <label className="label-author">
          Author:
          <input
            type="text"
            value={author}
            onChange={handleInputChange(setAuthor)}
          />
        </label>
        <br/>
        <button
          type="submit"
          className="blog-post-submit-btn"
        >
          Submit
        </button>
      </form>
    </div>
  );
};

字符串

赞(0）回复(0）举报 5个月前

我来回答

reactjs 如何使用react useMutation和useNavigate在成功提交请求后导航到不同的页面

1条答案

相关问题

热门标签

最新问答