Question

我在选择中的选项中有一个 for 循环，每次我更改状态时，它都会更改为最后选择的值，而 e.target.value 是当前值，我希望它在里面有一个调度，这就是为什么我没有用我的 select 元素上的 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。不知道为什么会更改为这种行为。

Answer 1

<块引用>

确保您已将 blkHandler() 放在 select 元素中，例如

<select value={blk} onChange={blkHandler}> render options.... </select>

Answer 2

问题是你的 console.log ...

来自docs

<块引用>

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

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

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

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

2 个答案: