Question

我想立即查看对状态使用react挂钩的变化。我的更改比状态落后了一步。我该怎么解决。

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

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

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

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

建议读为Using the Effect Hook。

Answer 2

状态更改在react挂钩中是异步的，因此不能保证在设置状态后即可更新状态。因此，我们有useEffect的救援人员接受了一个依赖项，并将在该依赖项更改后执行。

示例-

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

现在，在这种情况下，依赖项为categoryID，并且每当其值更改时，该函数都将执行并控制更新的值。

React Hooks状态更新落后了一步。因此，我的更改无法正常运行

2 个答案: