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 method not reflecting change immediately，但仍然无法解决。

我尝试了以下代码作为答案，

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

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

谢谢!

最佳答案

从当前的问题很难说，但我将假设您正在编写一个函数组件，并且正在使用useState挂钩。也就是说，在changeQty上方的某处，您会看到类似以下内容的内容:

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

如果是这样，那么答案就直接在上面的数量中。调用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);
}

关于javascript - 如何使setState立即生效？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62090259/