我还需要在 React 的 then 块中使用 async/await答案

【问题标题】：Do I still need to use async/await in a then block in React我还需要在 React 的 then 块中使用 async/await
【发布时间】：2020-11-22 07:19:13
【问题描述】：

所以我有这个块，如果我不使用 async/await，它将无法工作。我的问题是我知道 setState 是异步的，但 then 块是否会先确保 setWowfinish 在继续 console.log 部分之前先完成？谢谢！

      const [wow, setWow]=useState(null);  
      submitForm(payload)
      .then(async() => await setWow("djflajdlk"))// if I don't use async/await, it will not work
      .then(() => console.log(wow))
      .catch(err => alert(err.message))
  }

【问题讨论】：

流浪的}从何而来？您发布的代码中的任何内容都不会改变 wow 变量，所以我非常怀疑使用 async 会有所作为。它将始终记录 useState(null) 返回的值。
我建议您将console.log(wow) 放在const [wow, setWow]=useState(null); 之后，而不是放在承诺链中。如果你真的需要在 Promise 链中使用新值，我建议使用 submitForm(payload).then(result => { setWow(result); console.log(result); }).catch(console.error); 而不是 wow。
@Bergi } 是一个错误对不起...但是setWow 不是正在改变wow 的值吗？
不，它正在改变状态，这会导致 React 再次渲染组件，并且在该函数调用中 wow 将有一个新值。 const wow = … 应该清楚它不会改变。

标签： javascript reactjs asynchronous state setstate

【解决方案1】：

setWow 确实是异步的，但它不返回承诺，所以你不能await 它。

您可以使用useEffect 挂钩来检测您的状态变化并执行副作用，例如：

useEffect(() => {
   // wow has changed, do something with wow
   console.log(wow)
}, [wow])

【讨论】：

谢谢，但我需要在 submitForm 函数中设置 WOW 并使用 wow 做一些事情。 useEffect 可以这样做还是只监听 wow 的变化？
useEffect 只会检测到wow 的变化。你可以将你的逻辑分成两部分——一个在效果中，另一个在承诺链中——或者按照@Bergi上面的建议做
我的逻辑可能很难分开，所以我更喜欢Bergi的解决方案，但您的解决方案可能适用于我的另一个问题，谢谢！