时间戳

首页 > 解决方案 > 用于设置值的条件运算符不同步工作？

reactjs - 用于设置值的条件运算符不同步工作？

问题描述

早晨。

使用条件运算符设置新值时，我有一个看起来很傻的问题。下面是一个非常简化的代码块，用于将“selectedDc”的值从 0 切换到 1，反之亦然，然后从服务器获取具有更改后的值的新值。但是，当代码到达 API 调用行时，'selectedDc' 的新值不会立即出现，因此调用是使用旧值进行的。这会导致程序在用户意图之后运行“一键式”。

import React, {useState} from 'react';

const App = () => {
  const [selectedDc, setDc] = useState(0)

  //event triggered by pressing button
  const handleDcChange = async (event) => {
    event.preventDefault()
    console.log(selectedDc) //prints 0 as expected
    const dcValue = (selectedDc === 0) ? 1 : 0
    console.log(dcValue) //prints 1 as expected
    setDc(dcValue)
    console.log(selectedDc) //still after setting new value, prints 0??

    //Following lines are just several api calls that work as intended, no need to show implementation.
    await daycareService.changeDc(selectedDc)
    setShifts(await shiftService.getAll())
    setDcTeams(await daycareService.getGroups(selectedDc))
  }
}

我首先尝试在不创建新 const 的情况下设置新值，但它的工作方式完全相同，只是落后了一步。

selectedDc === 0 ?
  setDc(1) :
  setDc(0)

我做错了什么，我应该怎么做才能用第一个触发器获得正确的输出？

标签： reactjs

解决方案

selectedDoc将包含在最后一次调用 useState 时（渲染期间）检索到的状态值，之后不会更改。

该useState实现没有任何方法可以访问该selectedDoc变量，因为它超出了其范围，因此无法更改其值。

除了上述之外，您可能还需要记住setState 是异步的。

推荐阅读