React：如何从另一个组件更新useState状态？

你当前的思路是对的，通过props传递回调函数实现子组件更新父组件状态，这就是React中父子组件通信的标准最优方案，下面给你补全完整实现细节：

1. 补全FirstPage组件的实现 #

FirstPage需要接收父组件传递的changeState回调，并绑定到按钮的点击事件上：

const FirstPage = ({ changeState }) => {
  return (
    <div>
      {/* 点击这个按钮触发父组件的状态更新 */}
      <button onClick={changeState}>切换到第二页</button>
    </div>
  );
};

2. 优化父组件的回调命名（可选但推荐） #

把父组件里的onClick改成更语义化的名字，提升代码可读性：

const SignUp = () => {
  const [display, setDisplay] = useState(true);
  
  // 更清晰的函数名，明确作用是切换到第二页
  const handleSwitchToSecPage = () => {
    setDisplay(false);
  };

  return (
    <>
      {display ? <FirstPage changeState={handleSwitchToSecPage} /> : <SecPage />}
    </>
  );
};

为什么这是最优方案？ #

• 这是React官方推荐的父子组件通信方式，无需额外依赖第三方状态管理库
• 逻辑清晰，代码简洁，适合这种层级较浅的组件通信场景
• 只有当组件层级很深（超过3层）或者多个无关组件需要共享状态时，才需要考虑使用Context API或Redux这类方案，当前场景用回调完全足够

内容的提问来源于stack exchange，提问作者Arwa