javascript - React Hooks 状态更新落后一步。出于这个原因，我的更改无法正常工作

Question

我想立即看到在状态上使用 react hooks 的变化。我的更改在状态上落后了一步。我该如何解决这个问题。

const [categoryID, setCategoryID] = useState(0);

const changeCategory = (e) => {
    setCategoryID(e.target.value);
    console.log(categoryID);
  };

<Field
     as="select"
     onChange={changeCategory}
     style={formStyle().inputStyle}
     className="form-control"
     type="text"
     name="categoryID"
      >

当我选择第一个值时，结果显示为 0。如果我选​​择第二个值，我会在控制台上看到我第一个选择的值。

Answer 1

状态更改在 react 钩子(Hook)中是异步的，因此不能保证状态会在设置后立即更新。出于这个原因，我们有 useEffect 来拯救它接受依赖项并将在该依赖项更改后执行。

例子-

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

现在在这种情况下，依赖项是 categoryID，每当它的值发生变化时，该函数将被执行并控制更新后的值。