React中如何在变量状态改变后，通过点击事件触发Toast提示？

需求说明 #

• 操作流程：先点击「Button1（创建账户按钮）」，再点击「Button2（标记账户创建完成）」
• 功能要求：完成上述两步后，再次点击Button1时，控制台输出Toast提示信息

现有代码问题 #

现有代码的isLoading初始值设为true，不符合“未开始创建账户”的初始状态；且点击Button1时仅做状态判断，没有处理“启动创建流程”的逻辑，无法匹配需求里“先点击Button1触发创建”的步骤。

修正后的代码 #

import './App.css';
import { useState } from 'react';

function App() {
  // 标记是否已触发账户创建操作
  const [creationInitiated, setCreationInitiated] = useState(false);
  // 标记账户创建是否已完成
  const [creationCompleted, setCreationCompleted] = useState(false);

  const handleButton1Click = () => {
    if (creationCompleted) {
      // 已完成创建时，输出提示
      console.log("账户已创建完成，请勿重复操作");
    } else {
      // 未完成时，标记创建已启动
      setCreationInitiated(true);
    }
  };

  const handleButton2Click = () => {
    // 只有启动创建后，点击Button2才标记完成
    if (creationInitiated) {
      setCreationCompleted(true);
    }
  };

  return (
    <div>
      <button onClick={handleButton1Click}>Button 1 (创建账户按钮)</button>
      <button onClick={handleButton2Click}>Button 2 (标记账户创建完成)</button>
    </div>
  );
}

export default App;

逻辑说明 #

1. 用两个状态变量分别跟踪创建流程的启动和完成状态
2. 点击Button1时：
   • 若账户已完成创建，直接在控制台输出提示信息
   • 若未完成，标记创建流程已启动
3. 点击Button2时：仅当创建流程已启动时，标记创建完成
4. 完全贴合需求流程：先触发创建→标记完成→重复点击创建按钮时提示

内容的提问来源于stack exchange，提问作者Shakhawat Hossain SHIHAB