Question

象它一样,在我所希望的网页上浏览,在我向网页发送的瞬时转播中,我提出了这一请求。

在使用Mutation时,我尝试采用Success方案。我还利用突变进行了审判。有条件地审判和航行。如果我尝试navigate( / ),则在Click的操作功能中,它将回击回我的主页,但员额请求所作的改动没有显示。

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( / )
        }
    })
}

import {useEffect, useState} from "react";
import  ./BlogPostForm.css ;
import {handleInputChange} from "../utils/handleInputChange.js";
import {Link, useNavigate} from "react-router-dom";
import {useCreateBlogPost} from "../hooks/useCreateBlogPost.js";
import {getDate} from "../utils/getDate.js";

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

    const mutation = useCreateBlogPost();

    // useEffect(() => {
    //     if (mutation.isSuccess){
    //         navigate( / )
    //     }
    // }, [mutation.isSuccess, navigate]);

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

    return(
        <div>
            <Link to={"/"}>
                <h1 className={"blog-name"}>Blog Site ?</h1>
            </Link>
            <form className={"blog-post-form"}>
                <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"}
                    onClick={() => handleClick()}
                >Submit</button>
            </form>
        </div>
    )
}

Answer 1

纽伦提交重载该网页的表格现页<>。您希望防止在提交时采取违约的形式。

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> ); };

友情链接