React Hooks中如何在useEffect内判断布尔值并触发其他状态更新

问题原因 #

React 的状态更新为异步批处理逻辑，调用setNomStatus之后，当前作用域内的nomStatus仍然是本次渲染周期捕获的旧值（也就是初始定义的false），不会立刻更新为接口返回的最新值，所以你写的判断逻辑无法触发。

解决方法 #

方法1：直接使用接口返回值判断 #

你已经在接口响应中拿到了status的实际值，不需要等待状态更新后再判断，直接使用返回值判断即可，修改后代码如下：

const [nomStatus, setNomStatus] = useState(false);

useEffect(() => {
  const fetchData = async () => {
    const email = localStorage.getItem("loginEmail");
    try {
      const res = await Axios.get(
        "http://localhost:8000/service/activeStatus", 
        // 注意：get请求参数需要放在params字段中，原写法无法正确传参
        { params: { email } }
      );
      const currentStatus = res.data[0].status;
      setNomStatus(currentStatus);
      console.log("Get status data :" + currentStatus);
      // 直接用接口返回的最新值判断
      if (currentStatus) {
        setShowCalender(true);
      }
    } catch (e) {
      console.log(e);
    }
  };
  fetchData();
}, []);

方法2：单独监听nomStatus状态变化 #

如果你后续存在其他修改nomStatus的场景，且每次nomStatus变为true都需要触发日历显示，可以单独新增一个监听nomStatus变化的副作用：

const [nomStatus, setNomStatus] = useState(false);

// 原有获取状态的副作用
useEffect(() => {
  const fetchData = async () => {
    const email = localStorage.getItem("loginEmail");
    try {
      const res = await Axios.get(
        "http://localhost:8000/service/activeStatus", 
        { params: { email } }
      );
      setNomStatus(res.data[0].status);
    } catch (e) {
      console.log(e);
    }
  };
  fetchData();
}, []);

// 新增监听nomStatus变化的副作用
useEffect(() => {
  if (nomStatus) {
    setShowCalender(true);
  }
}, [nomStatus])

补充说明：方法1适合仅在接口请求后做一次判断的场景，方法2适合所有nomStatus变更都要联动触发逻辑的场景，可根据实际业务需求选择。

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