如何解决React中axios post请求后get请求无法获取提交数据的问题

核心问题 #

• 异步请求执行顺序错误
  axios.post属于异步操作，你在postData函数中调用post请求后立刻执行getData，此时post请求还未完成，get请求提前发出后拿到的还是未更新的旧数据。
• 模拟接口存储限制
  你当前使用的jsonplaceholder.typicode.com是公开模拟接口服务，仅返回预置的测试数据，不会实际持久化存储你提交的新内容，哪怕post请求返回成功，后续调用get接口返回的还是原有预置数据，不会包含你刚提交的内容。

修复方案 #

适配当前模拟接口的修复代码 #

调整异步执行顺序，post请求成功后手动将返回的新数据追加到本地状态中，即可立刻看到提交结果：

import { useState, useEffect } from 'react'
import axios from 'axios'

const App = () => {
    const [data, setData] = useState([])
    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
            setData(res.data)
        })
    }, [])
    const getData = () => {
        axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
            setData(res.data)
        })
    }
    const postData = () => {
        axios
            .post('https://jsonplaceholder.typicode.com/users', {
                name: 'test',
            })
            .then((res) => {
                // 手动追加新提交的用户到本地列表
                setData(prevList => [...prevList, res.data])
                // 若对接的是会真实存储数据的自有接口，可注释上方手动新增逻辑，直接在这里调用getData即可
                // getData()
            })
    }
    return (
        <div className='App'>
            <button onClick={postData}>post data</button>
            <button onClick={getData}>get data</button>
            {/* 修正map参数重名问题，避免变量名与外层state冲突
            {data.map((item, key) => (
                <p key={key}> {item.name} </p>
            ))}
        </div>
    )
}

export default App

内容的提问来源于stack exchange，提问作者siamak alipour