Javascript Don'；我不知道如何更新React hook

我已经试着问了几十次这个让我不知所措的问题。我已经做了一个最简单的例子来问这个问题

我在

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>
  );
}

const options=[“选项1”、“选项2”]；
导出默认函数ControllableState（）{
const[value，setValue]=React.useState（选项[0]）；
常量handleChange=val=>{
设定值（val）；
console.log（值）；
};
返回(
{value}


我认为问题在于您正在将值记录在
handleChange
函数中。控制台记录函数外部的值将记录正确的值。链接：
钩子不会立即更新您想要更新的值，正如您对类所期望的那样（尽管这也不能保证）

调用
setValue
时，状态钩子将触发重新渲染。在新渲染中，状态将具有您预期的新值。这就是为什么
控制台.log
会看到旧值

将其视为在每个渲染中，状态值只是该组件函数调用的局部变量。并将渲染结果视为该渲染调用中状态+道具的结果。每当这两个更改中的任何一个（来自父组件的道具；来自setXXX函数的状态）时，都会触发新渲染

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

从这个意义上说，在交互回调事件中，您只需担心是否正确更新状态，下一次渲染将注意，给定新的道具/状态，重新渲染结果，值不会“更改”同步-它甚至是用一个
常量声明的，所以即使它在同一范围内改变的概念也没有意义

当使用钩子更改状态时，组件重新提交时会看到新值。因此，要记录并使用“新值”执行操作，请在函数的主体中检查它：

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>
  );
}

const可控状态=（）=>{
const[value，setValue]=React.useState（选项[0]）；
常量handleChange=val=>{
设定值（val）；
};
//在此处添加日志：
log（'新的或更新的值：'，值）；
返回(
{value}


{
handleChange（新值）；
}}
选项={options}
renderInput={params=>(
)}
/>
);
}
您打印的是
handleChange
中的旧
值，而不是新的
val
。
i、 e

应该是：

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

实际上，让我们回头看看这个场景背后的逻辑。
您应该只使用“handleChange”函数来更新状态钩子，而让其他的东西来做，逻辑取决于状态钩子值，这主要是使用“useffect”钩子完成的

您可以重构代码，使其如下所示：

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

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

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);
  };

  const handleClick = () => {
      // DOING SOMETHING WITH value
      alter(`Now I'm going to do send ${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" />
        )}
      />
      <button type="button" onClick={handleClick}>Send selected option</button>
    </div>
  );
}

所以我认为主要的问题是你不了解你的反应
处理组件和状态

所以，我将大大简化React的功能


React渲染一个新组件并记住它的状态和输入（aka）
道具）这是孩子们的状态和投入
如果在任何给定点输入更改或状态更改，React将渲染
通过调用component函数，可以再次调用组件

考虑这一点：

function SomeComponent(text) {
    return (<div>The <i>text</i> prop has the value {text}</div>)
}

因此，这里React将调用
SomeComponent（）
，并呈现名称John和3
按钮。请注意，
name
变量的值在
当前执行，因为它声明为
const
。此变量仅反映
国家的最新价值

当您按下第一个按钮时，将执行
setName（）
。React将在内部存储
状态的新值，并且由于状态的更改，它将呈现
再次调用组件，因此将再次调用
SomeComponent（）
。现在变量
name
将
再次反映状态的最新值（这就是
useState
所做的），因此在本例中是Mary.React
将意识到DOM必须更新，并打印名称Mary

如果您按下第三个按钮，它将调用
doSomething（）
，这将打印
name
变量的最新值，因为每次React调用
SomeComponent（）
，使用最新的
name
的值。因此，一旦调用了
setName（）
，就不需要执行任何操作
要获取新值，请执行任何特殊操作。React将负责调用
组件功能

所以当你不使用类组件而是函数组件时，你必须考虑
不同的是：该函数始终由React调用，并且在任何单个
执行它反映了特定时间点的最新状态
调用
useState
hook的setter，您知道组件函数将
再次调用，并且
useState
将返回新值

我建议您阅读React文档，也请再次阅读

那么你应该怎么做呢？嗯，像这样：

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

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

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);
  };

  const handleClick = () => {
      // DOING SOMETHING WITH value
      alter(`Now I'm going to do send ${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" />
        )}
      />
      <button type="button" onClick={handleClick}>Send selected option</button>
    </div>
  );
}

const options=[“选项1”、“选项2”]；
导出默认函数ControllableState（）{
const[value，setValue]=React.useState（选项[0]）；
常量handleChange=val=>{
设定值（val）；
console.log（值）；
};
常量handleClick=（）=>{
//