reactjs - React Hooks - useState 值不能改变

问题

每当我单击 输入 时，我都想获取更新的钩子(Hook)状态的 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 )

请帮助我，因为我有几个小时的这个问题。谢谢 !

最佳答案

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

Working demo

关于reactjs - React Hooks - useState 值不能改变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56438643/