时间戳

首页 > 解决方案 > 如何让 setState 立即生效？

javascript - 如何让 setState 立即生效？

问题描述

我的代码中有一个输入元素：

<input id="input" className="ml-2" type="number" name="Qty" min="1" max="999" value={qty} onChange={(e) => {changeQty(e)}}/>

onChange 处理程序是：

    const changeQty = (e) => {
        setQty(e.target.value);
        console.log(qty);
    }

所以我想我在输入字段中输入的任何内容都会在控制台中打印出来，但事实是有延迟。

比如默认值为1，那么我输入2，那么就会打印出1。然后我输入 3，然后 2 将被打印出来。打印出来的数字是我之前输入的，而不是当前输入的，如下图：

在此处输入图像描述

谁能告诉我如何消除延迟？

我读了 useState set 方法没有立即反映变化，但仍然无法解决。

正如答案所示，我尝试了下面的代码，

useEffect(() => {
    setQty(document.getElementById("input").value)
}, [qty]);

但是发生了错误ReferenceError: Cannot access 'qty' before initialization。

谢谢！

标签： javascriptreactjs

解决方案

从当前的问题很难说，但我假设您正在编写一个函数组件并使用一个useState钩子。也就是说，在上面的某个地方changeQty你有类似的东西：

const [qty, setQty] = useState(0);

如果是这样的话，那么答案就直接在上面 qty 的赋值中了。qty在调用useState钩子时设置，并且在执行期间不会更改。

setQty 不更新 qty 的值。它更新内部状态，这将触发重新渲染。这意味着下次调用您的渲染函数时，qty将具有您使用的值。

但是对于函数的其余执行，qty将保持useState调用时的任何值。

如果您qty在函数的同一迭代中需要新值，您可以将其捕获为新变量。

const [qty, setQty] = useState(0);
let updatedQty = qty;

const changeQty = (e) => {
  updatedQty = e.target.value;
  setQty(updatedQty);
  console.log(updatedQty);
}

推荐阅读