Question

我正在尝试在react native中立即更新布尔状态变量。但是await关键字不起作用。因为状态设置器函数是异步的，如何使用异步/等待来做到这一点？在vscode中，setLike setter函数前面的await有一条消息：“ await对这种类型的表达式没有影响”

const likeIt = async () => {
        console.log('like pressed');
        console.log('liked? before set', like);  //**false**
        await setLike(like => !like);
        console.log('liked? after set', like);  //**should be true but getting false**
        const axiosAuth = await axiosWithAuth();
        const userToken = axiosAuth.defaults.headers.Authorization;

        if (like) {
            axiosAuth.post(`https://url`,{})
                .then(res => {
                    console.log('response from post like: ', res.data);
                })
                .catch(err => console.log('error in post like', err.message))
        } else {
            axiosAuth.delete(`https://url`)
                .then(res => console.log('res from unlike', res.data))
                .catch(err => console.log('err from unlike', err))
        }
    }

Answer 1

await useState();不起作用。

这是一个可能的解决方案，它可以在您的likeIt()函数中使用temp变量。

function App() {
  const [like, setLike] = useState(false);

   const likeIt = async () => {
     let temp = !like;

     const axiosAuth = await axiosWithAuth();
     const userToken = axiosAuth.defaults.headers.Authorization;

    if (!temp) {
      axiosAuth.delete(`https://url`)
              .then(res => console.log('res from unlike', res.data))
              .catch(err => console.log('err from unlike', err))
    } else {
      axiosAuth.post(`https://url`,{})
            .then(res => {
                console.log('response from post like: ', res.data);
            })
            .catch(err => console.log('error in post like', err.message))
    }

    setLike(temp);
}

  return (
    <div className="App">
      <button onClick={likeIt}>{like === true ? 'Liked' : 'Not Liked'}</button>
    </div>
  );
}

Answer 2

由于等待setLike（）而导致编译错误吗？如果不是这样，这将是一个小问题，这会使VScode上的某些人感到困惑。请检查https://github.com/microsoft/vscode/issues/80853

Answer 3

如果我们谈论反应挂钩，那么您应该知道useState()返回两个值的数组。第二个值是一个调度函数，用于更改状态值。而且此功能是同步的。在您的示例中，此调度函数为setLike()（并且它是同步函数）。因此await关键字实际上不适用于他们。

React在引擎盖中具有特殊的系统，可以随着状态的变化而工作。该系统等待状态变化的批处理，然后更新状态并重新渲染组件。在状态更新和组件重新呈现之前，我们的likeIt()函数将完成。

您可以使用useEffect()生命周期方法来处理like状态的更改。

例如：

const likeIt = async () => {
        console.log('like pressed');
        console.log('liked? before set', like);  //**false**
        await setLike(like => !like);
}

useEffect(() => {
        console.log('liked? after set', like); //**true**
        ...
}, [like]);

使用异步/等待更新反应本机状态

3 个答案: