Reactjs axios POST请求后更新状态，而不是页面刷新

我有一个带有输入字段“title”和“body”的表单，它们在提交表单后被添加到MongoDB中，但新的帖子项目只有在我刷新页面后才会显示（当然这不是它应该如何工作），但我想知道我做错了什么，以及如何修复

handleSumbit

函数

这是我的密码：

import { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

function App() {
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [posts, setPosts] = useState([]);

    const url = "http://localhost:8005/";

    useEffect(() => {
        const fetchPosts = async () => {
            const response = await axios(`${url}posts`);
            setPosts(response.data);
        };
        fetchPosts();
    }, []);

    const handleTitleChange = (event) => {
        setTitle(event.target.value);
    };

    const handleBodyChange = (event) => {
        setBody(event.target.value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();

        axios.post(`${url}posts`, { title: title, body: body })
          .then((res) => {
             console.log(res.data);
        });

        alert("Post added!");

        setTitle("");
        setBody("");
    };

    console.log(posts);

    return (
        <div className="App">
            {posts.map((post) => (
                <div className="post" key={post.id}>
                    <h4>{post.title}</h4>
                    <p>{post.body}</p>
                </div>
            ))}
            <form onSubmit={handleSubmit}>
                <label>
                    Mew post:
                    <input
                        type="text"
                        name="title"
                        placeholder="Add title"
                        onChange={handleTitleChange}
                    />
                    <input
                        type="text"
                        name="body"
                        placeholder="Add body"
                        onChange={handleBodyChange}
                    />
                </label>
                <button type="submit">Add</button>
            </form>
        </div>
    );
}

export default App;

从“react”导入{useState，useffect}；
从“axios”导入axios；
导入“/App.css”；
函数App（）{
const[title，setTitle]=useState（“”）；
const[body，setBody]=useState（“”）；
const[posts，setPosts]=useState（[]）；
常量url=”http://localhost:8005/";
useffect（（）=>{
const fetchPosts=async（）=>{
const response=await axios（`${url}posts`）；
设置柱（响应数据）；
};
fetchPosts（）；
}, []);
const handleitlechange=（事件）=>{
setTitle（event.target.value）；
};
const handleBodyChange=（事件）=>{
setBody（事件、目标、值）；
};
const handleSubmit=（事件）=>{
event.preventDefault（）；
post（`${url}posts`，{title:title，body:body}）
。然后（（res）=>{
console.log（res.data）；
});
警告（“添加帖子！”）；
片名（“”）；
立根体（“”）；
};
控制台日志（posts）；
返回(
{posts.map（（post）=>(
{post.title}
{post.body}

))}
Mew员额：
添加
);
}
导出默认应用程序；

问题在于，在发送axios post请求后，您没有更新posts状态。编辑以下代码块：

const handleSubmit = (event) => {
    event.preventDefault();

    axios.post(`${url}posts`, { title: title, body: body })
      .then((res) => {
         console.log(res.data);
         // save the new post to posts
         setPosts([...posts, res.data])
    });

    alert("Post added!");

    setTitle("");
    setBody("");
};