不了解如何更新React钩子

Question

我已经尝试过多次问这个不舒服的问题。现在，我已经提出了几乎最简单的示例来问这个问题。

我在handleChange方法中更改了挂钩的值。但是console.log总是显示以前的值，而不是新的值。为什么会这样？

我需要更改钩子的值，然后代替执行console.log，而是使用它来做其他事情。但是我不能，因为这个钩子总是没有我刚刚尝试放入的钩子。

const options = ["Option 1", "Option 2"];

export default function ControllableStates() {
  const [value, setValue] = React.useState(options[0]);

  const handleChange = val => {
    setValue(val);
    console.log(value);
  };

  return (
    <div>
      <div>{value}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          handleChange(newValue);
        }}
        options={options}
        renderInput={params => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
      />
    </div>
  );
}

您可以在这里尝试。https://codesandbox.io/s/awesome-lumiere-y2dww?file=/src/App.js

Answer 1

我相信问题是您正在handleChange函数中记录该值。控制台在函数外部记录该值会记录正确的值。链接：https://codesandbox.io/s/async-fast-6y71b

Answer 2

钩子不立即更新您想要更新的值，就像您对类所期望的那样（尽管也不保证）

状态挂钩，在调用setValue时将触发重新渲染。在该新渲染中，状态将具有您期望的新值。这就是为什么您的console.log sees旧值。

考虑每个渲染时，状态值只是该组件函数调用的局部变量。然后根据渲染调用中的状态+道具来考虑渲染的结果。每当这两个更改中的任何一个（来自父组件的道具；来自您的setXXX函数的状态）时，都会触发新的渲染。

如果移出回调处理程序的console.log outside（即在渲染的主体中），则在交互后发生的渲染中将看到状态已正确记录。

从这种意义上说，在交互作用下的回调事件中，您只需要担心正确更新状态，并且在给出新的props / state的情况下，下一次渲染将注意重新渲染结果

Answer 3

[值不会同步“更改”-甚至用const声明，因此即使在相同范围内更改它的概念也没有意义。

使用钩子更改状态时，将显示新值重新渲染组件时。因此，要记录并使用“新值”进行操作，请在函数主体中进行检查：

const ControllableStates = () => {
  const [value, setValue] = React.useState(options[0]);

  const handleChange = val => {
    setValue(val);
  };
  // ADD LOG HERE:
  console.log('New or updated value:', value);

  return (
    <div>
      <div>{value}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          handleChange(newValue);
        }}
        options={options}
        renderInput={params => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
      />
    </div>
  );
}

Answer 4

您要在value中打印旧的handleChange，而不是新的val。即

  const handleChange = val => {
    setValue(val);
    console.log(value);
  };

应该是：

  const handleChange = val => {
    setValue(val);
    console.log(val);
  };

Answer 5

实际上，让我们稍微回顾一下，看看这种情况背后的逻辑。您仅应使用“ handleChange”函数来更新状态挂钩，然后让其他事情根据该状态挂钩的值执行逻辑，这大部分是通过“ useEffect”挂钩完成的。]

您可以将代码重构为如下形式：

  const handleChange = val => {
    setValue(val);
   };

  React.useEffect(() => {
    console.log(value);
    // do your logic here
  }, [value])

Answer 6

所以我认为主要问题是您不了解React如何处理组件和状态。