无法在自定义挂钩内的回调 function 中访问 state

Question

https://codesandbox.io/s/building-forms-in-react-forked-0n41j?file=/src/index.js

当我在输入Full Name上输入文本时，我单击键输入输入值仍然是 "" 在警报弹出文本上。

看看我下面的代码。

function useKeyPressListener(callback?: Function, keys: string[] = ["Enter"]) {
  const handleClick = (e: any) => {
    if (keys.includes(e.key)) {
      e.preventDefault();
      e.stopPropagation();
      if (callback) callback();
    }
  };

  useEffect(() => {
    console.log("added");
    document.addEventListener("keypress", handleClick);
    return () => {
      console.log("remove");
      document.removeEventListener("keypress", handleClick);
    };
  }, []);
}

const App = () => {
  const [value, setValue] = useState("");

  const submit = () => {
    window.alert(`you submitted value ${value}`);
  };

  useKeyPressListener(submit);
  return (
    <div>
      <div className="col-md-6">
        <h3> Sample Form Container </h3>
        <Input
          inputType={"text"}
          title={"Full Name"}
          name={"name"}
          value={value}
          placeholder={"Enter your name"}
          handleChange={(e) => setValue(e.target.value)}
        />
        <Button action={submit} type={"primary"} title={"Submit"} />
      </div>
      <div>{value}</div>
    </div>
  );
};

Answer 1

document.addEventListener("keypress", handleClick);

在mount中执行一次，所以它首先引用包含value=""的handleClick function

你应该在 handleClick 引用更改时更新 handleClick，这样你就可以像下面那样将 [callback] 添加到你的 useEffect

  useEffect(() => {
    console.log("added");
    document.addEventListener("keypress", handleClick);
    return () => {
      console.log("remove");
      document.removeEventListener("keypress", handleClick);
    };
  }, [callback]);

它固定在这里