对JSONPlaceholder的POST请求在以后的获取中没有生效

Question

我已经用typicode的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;

Answer 1

向JSONPlaceholder发出的post请求只是为了测试，它并没有真正在其数据库中注册。这是他们的文档中的一句话：

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

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

Answer 2

JSONPlaceholder使用POST、GET、PUT、PATCH、HEAD和DELETE等HTTP方法作为客户端和服务器之间的交互示例。虽然所有这些方法都能工作、产生结果并发挥作用，但数据不会永久存储在JSONPlaceholder中。