对 JSONPlaceholder 的 POST 请求在后续获取中未生效

我已经使用 typecode 使用 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;

A post向 JSONPlaceholder 发出的请求只是为了测试，它并没有真正在其数据库中注册。这是他们的引述doc:

重要提示：资源不会在服务器上真正更新，但会被伪造。

当您重定向到"/", Posts将获取数据，但它不会包含您刚刚添加的内容Form.