如何使用 axios 和 React State Hook 发出 POST 请求 [重复]答案

【问题标题】：How to make POST request with axios and React State Hook [duplicate]如何使用 axios 和 React State Hook 发出 POST 请求 [重复]
【发布时间】：2021-03-01 03:02:49
【问题描述】：

我怎样才能正确地发出以下 POST 请求？

const postWorkout = async () => {

    setCompletedWorkout({
      date: 31,
      day: workout.mains[0].day,
      exercises: completedExercises
    })
    
    try {
      await axios.post('/history', completedWorkout)
    } catch(error) {
      throw error
    }
  }

我相信它在 completedWorkout 实际设置之前发出请求，如数据库中的空文档所示：

【问题讨论】：

更新completedWorkout后是否要发出请求？
状态更新不会立即发生。 completedWorkout 是一个 const（或应该是），在调用 next render 之前无法更改。您要么需要将帖子移至useEffect，要么直接使用新对象。
是的，我愿意！到目前为止，我尝试过的唯一解决方法是将它们放在不同的函数中并首先调用 setCompletedWorkout 函数，然后调用该函数来发出请求。但是，这可能不是最有效的方式...我希望它们具有相同的功能

标签： reactjs async-await axios

【解决方案1】：

我假设setCompletedWorkout 将其设置为状态。如果是这样，您将需要等待它完成，因为设置状态是异步的。您可以像这样使用useEffect 来做到这一点：

useEffect(() => {
   // POST HERE
}, [completedWorkout]);

useEffect 中的代码将在您的completedWorkout 设置后执行

【讨论】：

谢谢！我已经有一个 useEffect 可以在第一次渲染时获取数据。是否可以有多个 useEffects 或只有一个？
useEffects 的数量没有限制。
有没有办法只在设置锻炼时调用 useEffect？我有我的依赖数组作为 [workout] 但根据一些文档，它也在第一次渲染时被调用？所以它实际上发布了两次，一次是在第一次渲染时，第二次是在调用 setWorkout 时
@nalanart 在 useEffect 中，也许您可以添加一个检查以确保 completedWorkout 不为空/null