如何解决axios的post request问题，在get request上不显示在react上 &

Question

我用axios做了一些post request，在这段代码中，我发布了一个新的用户名，但发布后，我不能从api获得我发布的名称，我怎么能解决这个问题，看到我发布的请求

const App = () => {
const [data, setData] = useState([])
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
console.log(res)
console.log(res.data)
setData(res.data)
})
}, [])
let getData = () => {
axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
console.log(res)
console.log(res.data)
setData(res.data)
})
}
let postData = () => {
axios
.post('https://jsonplaceholder.typicode.com/users', {
name: 'test',
})
.then((res) => {
console.log(res)
})
getData()
}
return (
<div className='App'>
<button onClick={postData}>post data</button>
<button onClick={getData}>get data</button>
{data.map((data, key) => (
<p key={key}> {data.name} </p>
))}
</div>
)
}
export default App

Answer 1

在做GET之前没有等待POST的响应，将getData移动到POST请求的then回调中-

let postData = () => {
axios
.post('https://jsonplaceholder.typicode.com/users', {
name: 'test',
})
.then((res) => {
console.log(res)
getData()
})

}

虽然只有在您确定数据可立即用于GET时才这样做，即您没有排队写入数据库或任何东西。

虽然作为旁注，如果你使用'jsonplaceholder'假API，肯定不会更新反正?每次都会返回相同的响应吗?

看起来像从他们的文档，在一个POST请求，你应该能够得到这样的响应-

let postData = () => {
axios
.post('https://jsonplaceholder.typicode.com/users', {
name: 'test',
})
.then((res) => {
setData(res.data)
});        
}

(不需要GET请求)

Answer 2

我认为你想在本地更新你的状态;当然，您需要一个自定义后端来接收您的post输入并更新get请求返回的数据集，jsonplaceholder无法实现这一点。这里有一个示例和一些代码注释。