React Hooks规则是否允许在条件语句（含Promise回调）中更新state？

核心结论：分场景判定，你贴的示例写法本身不属于渲染阶段同步更新state的违规操作，但存在严重的运行时隐患，不符合React开发规范。

两类if/else更新state的场景判定 #

• 违规场景：组件渲染执行过程中，在if/else分支内同步直接调用setState
  组件函数本身是纯渲染逻辑，执行过程中不允许产生任何副作用，同步调用setState会立刻触发重渲染，导致渲染死循环，React开发环境会直接抛出渲染阶段更新状态的报错。
• 合规场景：在异步回调（Promise.then、setTimeout、AJAX回调）、用户交互事件回调（点击、输入、提交等）内部的if/else分支中调用setState
  这类逻辑执行时组件当期渲染已经完成，setState触发的是正常的后续重渲染流程，React本身不会限制这类写法。

你提供的示例代码存在的问题 #

你写的逻辑虽然不会触发渲染阶段更新state的报错，但有几个致命问题：

1. 组件每次重渲染都会重新走if/else判断，重复触发Promise请求，产生大量冗余网络/逻辑调用，状态更新时序完全不可控
2. 没有做竞态处理：如果组件快速重渲染，先发出的请求晚返回时，会覆盖后发请求拿到的正确状态，导致页面展示错误数据
3. 没有卸载清理逻辑：如果组件在Promise还没返回时就被卸载，回调里执行setState会触发「已卸载组件更新状态」的内存泄漏警告
4. 组件名小写：React要求自定义组件名必须大写开头，你写的function example()会被识别为原生HTML标签，无法正常渲染

符合官方规范的写法参考 #

带条件判断的异步状态更新，必须放到useEffect中执行，将判断条件作为依赖项，同时做好竞态拦截和卸载清理：

import { useState, useEffect } from "react";
import { somePromiseOne, somePromiseTwo } from "./example";

function Example() {
  const [state, setState] = useState();
  // 替换为实际业务判断条件，可以是props、其他state值
  const judgeCondition = true;

  useEffect(() => {
    // 挂载标记，处理竞态和内存泄漏
    let isActive = true;

    const fetchData = async () => {
      const result = judgeCondition ? await somePromiseTwo() : await somePromiseOne();
      // 仅组件未卸载、当前请求未被过期标记时更新状态
      if (isActive) setState(result);
    };

    fetchData();

    // 组件卸载、或者依赖项变化触发下一次effect执行前，标记当前请求过期
    return () => {
      isActive = false;
    };
  }, [judgeCondition]); // 仅判断条件变化时重新执行异步逻辑

  // 组件渲染逻辑
  return <div>{state}</div>;
}

补充提示：如果你的if/else判断是写在onClick、onSubmit这类用户交互事件处理函数里，不管分支里是同步setState还是等Promise返回后setState，都是完全合规的，不需要套useEffect包裹。

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