React Hooks 状态更新落后了一步。因此，我的更改无法正常工作答案

【问题标题】：React Hooks State update one step behind. For this reason my changes are not working correctlyReact Hooks 状态更新落后了一步。因此，我的更改无法正常工作
【发布时间】：2021-01-01 06:14:27
【问题描述】：

我想立即看到在 state 上使用 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。如果我选择第二个值，我会在控制台上看到我首先选择的值。

【问题讨论】：

所以categoryID 将在下一次渲染时更新。您已经知道它将被更新为什么值，所以在等待它的同时，您可以登录 console.log(e.target.value)。

标签： javascript html reactjs react-hooks

【解决方案1】：

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

例子-

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

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

【讨论】：

我想做这样的多个操作。我有另一个选择元素，我也想在上面保留数据。在这种情况下我该怎么办。据我所知 useEffect 需要一个数组
@Gucal 我不明白你的问题，但如果你愿意，你可以拥有尽可能多的 useEffects。您还可以传递多个依赖项，例如 [categoryID, searchString]。这样，无论何时更改任何依赖项值，都会调用 useEffects 函数。
嗨！ []这个用法和[1]这个用法有什么区别？
@Gucal 在这种情况下，无论何时更改 categoryId，都会调用 useEffect，而在 [1] 的情况下，只会在组件挂载后调用一次 useEffect。
为什么我留空时它会更新为 categoryID？

【解决方案2】：

此行为背后的主要原因是 setState 是异步，因此不应立即进行更改。

特别是对于这种情况，有一个名为useEffect() 的钩子来捕获状态变化。如果您将categoryId 添加到useEffect 的依赖数组中，那么一旦您对该状态进行了更改，它将被触发。因此，您可以按以下方式记录您的更改：

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

建议阅读是Using the Effect Hook。

【讨论】：

这似乎是一种极端措施，可以在 OP 需要的时候捕获已经可用的数据。
@spender 只是为了举例而提到的，但e.target.value 当然可以在那个地方登录。
@spender 我如何保持全局性？
我想做这样的多个操作。我有另一个选择元素，我也想在上面保留数据。在这种情况下我该怎么办。据我所知 useEffect 需要一个数组。 @norbitrial