javascript - 为什么必须调用函数两次才能更新钩子(Hook)状态？

Question

我正在尝试实现以下是/否按钮:

import React, { useState } from "react";

const YesNoComponentFunctional = () => {
  const [button, setButton] = useState("");

  const onYesPress = () => {
    setButton("Yes");
    console.log({ button });
  };

  const onNoPress = () => {
    setButton("No");
    console.log({ button });
  };

  return (
    <div>
      <button onClick={() => onYesPress()}>Yes</button>
      <button onClick={() => onNoPress()}>No</button>
     </div>
  );
};
export default YesNoComponentFunctional; 

我从中得到的article here .

我不明白为什么我必须单击按钮两次才能正确地将消息显示到控制台。为什么会发生这种情况？

Answer 1

setButton 是异步方法，您的按钮状态不会立即更新。 您可以使用 useEffect hook 来检查按钮的值是否更新。

useEffect(() => {
  console.log({button});
}, [button]);