React Hooks - useState的值无法更改

Question

问题

我想在每次点击“Enter”时都能获取更新后的钩子状态值value，但我总是得到初始值，而不是更新后的值。

代码

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ContentEditable from "react-contenteditable";

const ItemCol = props => {
  const [value, setValue] = useState("Initial Value");

  const onChange = event => {
    setValue(event.target.value);
    console.log("onChange: " + value);
  };

  const keyDown = event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      //Value should be changed, but did not change
      console.log("Enter Pressed: " + value);
    }
  };

  return (
    <ContentEditable
      html={value}
      onKeyDown={React.useCallback(keyDown)}
      onChange={React.useCallback(onChange)}
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ItemCol />, rootElement);

CodeSandBox.io: https://codesandbox.io/embed/pensive-worker-31l3r

注意：keyCode 13 是 Enter 键。

注意2：我正在使用 react-contenteditable 依赖项。 (https://www.npmjs.com/package/react-contenteditable)

请帮我解决这个问题，我已经为此烦恼了几个小时。谢谢！

- Michael Harley

---

setState 是异步的。它将在下一个渲染周期中更新。 - Amit Chauhan

我该如何实现“下一个渲染周期”？我在onChange中获取了更改的值，但在keyDown中没有。别忘了在codesandbox上检查控制台日志。 - Michael Harley

Answer 1

ContentEditable组件似乎会记忆onKeydown方法，因此每次调用它时，都会打印其初始闭包中的值，这就是为什么始终具有初始值的原因。

为了解决这个闭包问题，您可以将值保存在ref中并进行更改。

const ItemCol = props => {
  const [value, setValue] = useState("Initial Value");
  const valRef = useRef(value);
  const onChange = event => {
    setValue(event.target.value);
    valRef.current = event.target.value;
  };

  const keyDown = event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      //Value should be changed, but did not change
      console.log("Enter Pressed: " + valRef.current);
    }
  };

  return (
    <ContentEditable
      html={value}
      onKeyDown={keyDown}
      onChange={React.useCallback(onChange)}
    />
  );
};

工作演示

- Shubham Khatri

---

哇，非常感谢！这对我来说都是新的东西。再次感谢 :) - Michael Harley

Answer 2

@Michael Harley，问题出在闭包或者是 react-content-editable 中 onkeydown 函数的设置方式上。

工作演示：https://codesandbox.io/embed/elated-bohr-jeu4u?fontsize=14

资源：https://overreacted.io/a-complete-guide-to-useeffect/

- sudhakar selva