React中嵌套if else与setState使用异常：状态值为null的排查

1. 直接错误：id="0"分支未正确调用setStatus #

你的代码中，当id === "0"时，仅定义了一个箭头函数() => setStatus("Pending");但未执行，导致该分支下isStatus始终保持初始空字符串状态。

修复方式：
将该分支的箭头函数改为直接调用setStatus：

if (id === "0") {
  setSelectorCard(0);
  setCurrentStep(1);
  setStatus("Pending"); // 移除多余箭头函数，直接执行状态更新
}

2. 异步状态更新导致console.log显示旧值 #

React的setState是异步操作，调用setStatus后isStatus不会立刻更新。你在初始化useEffect中调用checkData后立刻打印isStatus，此时拿到的是组件初始渲染时的旧值，并非更新后的结果。

验证更新后的值的方式：
新增一个监听isStatus变化的useEffect，状态更新时再打印：

useEffect(() => {
  console.log("当前isStatus:", isStatus);
}, [isStatus]); // 依赖isStatus，状态变化时触发

额外优化建议 #

可以将checkData中的多分支判断改为对象映射，让代码更简洁易维护：

const statusMap = {
  "0": { selectorCard: 0, currentStep: 1, status: "Pending" },
  "1": { selectorCard: 1, currentStep: 2, status: "Client Negotiation Approved" },
  "2": { selectorCard: 0, currentStep: 1, status: "Client Negotiation Rejected" },
  "3": { selectorCard: 2, currentStep: 3, status: "Agenda Schedule Approve" },
  "4": { selectorCard: 1, currentStep: 2, status: "Agenda Schedule Revision" },
  "5": { selectorCard: 3, currentStep: 4, status: "Event Budget Approved" },
  "6": { selectorCard: 2, currentStep: 3, status: "Event Budget Revision" },
};

const checkData = (id) => {
  const data = statusMap[id];
  if (data) {
    setSelectorCard(data.selectorCard);
    setCurrentStep(data.currentStep);
    setStatus(data.status);
  }
};

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