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

Question

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

When I enter text on the input Full Name , and I click on the keywork enter the value of the input still "" on alert popup text.

look at my code below.

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

is executed once in mount, so it takes the first reference of handleClick function that contain value=""

you should update handleClick when ever handleClick reference change so you can just add [callback] to your useEffect like below

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

it is fixed here