Javascript 对 JSONPlaceholder 的 POST 请求在以后的 fetch 中不生效

我已经用典型代码的GET方法对帖子进行了排序.现在我想使用POST方法自己添加它.我怎样才能正确地做这件事？

这里的问题是，即使它被发布了，它也不会出现在帖子列表中.我希望当我自己添加它并在排名中看到它时，它会出现在所有帖子中.我该怎么做呢？

import axios from "axios";
import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
const Form = ({ mainData, setData }) => {
  const [formData, setFormData] = useState({
    title: "",
    body: "",
  });

  const history = useNavigate();

  const onChange = (e) => {
    setFormData({[e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    history("/");
    axios
      .post("https://jsonplaceholder.typicode.com/posts", formData)
      .then((res) => {
        console.log(res);
      });
  };
  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        placeholder="your title"
        name="title"
        value={formData.title}
        onChange={onChange}
      />
      <input
        type="text"
        placeholder="body"
        name="body"
        value={formData.body}
        onChange={onChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";

const Posts = ({mainData, setData}) => {

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res)
      .then((res) => {
        setData(res.data);
        console.log(mainData);
      });
  }, []);
  return (
    <>
      <NavLink to="/new">Add new post</NavLink>
      {mainData?.map((item, index) => (
        <h4 key={index}>
          {item.id} : {item.title}
        </h4>
      ))}
    </>
  );
};

export default Posts;

import React, {useState} from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Form from "../Form";
import Posts from "../Posts";
const Rout = () => {

  const [mainData, setData] = useState([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Posts mainData={mainData} setData={setData}/>} ></Route>
        <Route path="/new" element={<Form mainData={mainData} setData={setData}/>}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Rout;