React TS useState状态更新不及时导致按钮状态判断异常

问题根因 #

React 中 useState 的状态更新是异步批量执行的，调用 setText(value) 之后，当前函数执行上下文内的 text 变量仍然是本次渲染开始时的旧值，状态更新要等到当前函数执行完成、触发重渲染之后才会生效。你在 setText 之后立刻读取 text，拿到的永远是更新前的值，所以会出现逻辑慢一拍的情况。

最优解决方案（推荐） #

你完全不需要单独维护 active 状态，直接通过 text 的值推导按钮禁用状态即可，避免维护冗余的关联状态：

const [text, setText] = useState("");
const [loading, setLoading] = useState(false);

function SendRequest() {
  // 你的请求逻辑
}

// 输入框仅负责更新text即可
<TextField
    id="outlined-basic"
    label="Enter your text to begin"
    variant="outlined"
    fullWidth
    multiline
    rows={4}
    value={text}
    onChange={(e) => setText(e.target.value)}
/>

// 直接通过text的长度判断禁用状态，可加trim避免全空格的无效输入
<LoadingButton 
  variant="contained" 
  disabled={text.trim().length === 0} 
  loading={loading} 
  loadingPosition="end" 
  onClick={SendRequest}
>
Go
</LoadingButton>

兼容原有逻辑的修正方案 #

如果你有特殊场景必须单独维护 active 状态，那么判断逻辑直接用最新传入的 value 即可，不需要依赖尚未更新的 text 状态：

const [text, setText] = useState("");
const [active, setActive] = useState(false)

function HandleActiveButton(value: string = '') {
    setText(value)
    // 直接用新传入的value判断，不要用旧的text
    if (value.length > 0) {
        setActive(true)
        console.log(value)
    } else {
        setActive(false)
        console.log(value)
    }
}

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