时间戳

首页 > 解决方案 > 更改时选择的useState钩子不一样

javascript - 更改时选择的useState钩子不一样

问题描述

我在选择中的选项中有一个 for 循环，每次我更改状态时，它都会更改为最后选择的值，而 e.target.value 是当前值，我希望它在里面有一个调度，这就是我没有这样做的原因它与我的选择元素上的 onChange 内联。

  const [blk, setBlk] = useState(1);

  const getBlks = () => {
    let blks = [];
    for (let i = 1; i <= 33; i++) {
      blks.push(
        <option key={i} value={i}>
          {i}
        </option>
      );
    }
    return blks;
  };

  const blkHandler = e => {
    console.log(e.target.value);
    setBlk(e.target.value);
    console.log(blk);
  };

例如，当我将选择从 1 更改为 3 时，e.target.value 更改为 3，而 blk 为 1。不知道为什么它会更改为这种行为。

标签： javascriptreactjsreact-hooks

解决方案

问题是你的 console.log ...

从文档

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。无法保证对 setState 的调用同步操作，并且可能会批处理调用以提高性能。

您可以使用 useEffect 挂钩来测试您的状态是否在功能组件中发生了变化，例如

useEffect(() => {
 console.log(blk)
},[blk])

推荐阅读