React如何在render()函数中更新状态？附登录场景解决方案咨询

嘿，这个问题我太熟了！先给你捋清楚为啥直接在render()里调用setState()会出警告，再给你几个靠谱的解决方案。

为啥会出现警告？ #

React的render()函数是用来渲染UI的，它会在组件状态/ props变化时自动触发。如果你在render()里直接调用setState()，状态更新又会触发新一轮的render()，这就会陷入「render → setState → render」的无限循环，React当然会给你抛出警告啦！

针对登录场景的解决方案 #

根据你的类组件+GraphQL MockMutation代码，给你三个实用的方案：

方案1：用Mutation的onCompleted回调（最推荐）

绝大多数GraphQL Mutation组件（包括MockMutation）都支持onCompleted参数，专门用来处理请求完成后的逻辑，完全不会在render流程里执行，完美避开循环问题：

<Form.Field>
  <label>&nbsp;</label>
  <MockMutation 
    mutation={DO_LOGIN}
    // 新增onCompleted回调处理登录成功逻辑
    onCompleted={(data) => {
      if (data.loggedInState === "LOGGED_IN") {
        // 用setState的回调确保状态更新完成后再跳转
        this.setState({ goodLogin: true }, () => {
          // 这里假设你用react-router做路由跳转，根据实际路由库调整
          this.props.history.push('/your-target-page');
        });
      }
    }}
  >
    {(doLogin, { loading, error }) => {
      // 这里只负责渲染按钮，不用再处理登录成功逻辑
      return (
        <Button 
          primary 
          className="login-btn full-width" 
          disabled={loading} 
          onClick={e => {
            e.preventDefault();
            doLogin({ 
              variables: { 
                employeeId: this.state.employeeId, 
                password: this.state.password 
              } 
            });
          }}
        >
          <span style={loading ? { display: "none" } : {}}>Login</span>
          <span style={loading ? {} : { display: "none" }}>Loading...</span>
        </Button>
      );
    }}
  </MockMutation>
</Form.Field>

方案2：用Ref标记避免重复触发

如果你的MockMutation不支持onCompleted，可以用React的Ref来标记是否已经执行过跳转逻辑，防止每次render都触发setState：

首先在组件的构造函数里创建一个Ref：

constructor(props) {
  super(props);
  this.state = {
    employeeId: '',
    password: '',
    goodLogin: false
  };
  // 创建一个标记用的ref
  this.hasRedirected = React.createRef();
  this.hasRedirected.current = false;
}

然后修改render里的逻辑：

<MockMutation mutation={DO_LOGIN}>
  {(doLogin, { loading, error, data }) => {
    // 只有当未加载、登录成功且还没跳转过时才执行
    if (!loading && data?.loggedInState === "LOGGED_IN" && !this.hasRedirected.current) {
      this.hasRedirected.current = true;
      this.setState({ goodLogin: true }, () => {
        this.props.history.push('/your-target-page');
      });
    }
    return (
      // 按钮代码保持不变
      <Button 
        primary 
        className="login-btn full-width" 
        disabled={loading} 
        onClick={e => {
          e.preventDefault();
          doLogin({ 
            variables: { 
              employeeId: this.state.employeeId, 
              password: this.state.password 
            } 
          });
        }}
      >
        <span style={loading ? { display: "none" } : {}}>Login</span>
        <span style={loading ? {} : { display: "none" }}>Loading...</span>
      </Button>
    );
  }}
</MockMutation>

方案3：用componentDidUpdate生命周期处理

把Mutation的data存到组件状态里，然后在生命周期钩子中判断并处理跳转，适合更复杂的状态跟踪场景：

// 先在state里新增mutationData和loading字段
state = {
  employeeId: '',
  password: '',
  goodLogin: false,
  mutationData: null,
  loading: false
};

componentDidUpdate(prevProps, prevState) {
  const { mutationData, loading } = this.state;
  // 对比前后状态，确保只触发一次跳转
  if (!loading && 
      mutationData?.loggedInState === "LOGGED_IN" && 
      mutationData !== prevState.mutationData) {
    this.setState({ goodLogin: true }, () => {
      this.props.history.push('/your-target-page');
    });
  }
}

render() {
  return (
    <Form.Field>
      <label>&nbsp;</label>
      <MockMutation mutation={DO_LOGIN}>
        {(doLogin, { loading, error, data }) => {
          // 将mutation的状态同步到组件state
          if (data !== this.state.mutationData || loading !== this.state.loading) {
            this.setState({ mutationData: data, loading });
          }
          return (
            // 按钮代码保持不变
            <Button 
              primary 
              className="login-btn full-width" 
              disabled={loading} 
              onClick={e => {
                e.preventDefault();
                doLogin({ 
                  variables: { 
                    employeeId: this.state.employeeId, 
                    password: this.state.password 
                  } 
                });
              }}
            >
              <span style={loading ? { display: "none" } : {}}>Login</span>
              <span style={loading ? {} : { display: "none" }}>Loading...</span>
            </Button>
          );
        }}
      </MockMutation>
    </Form.Field>
  );
}

总结 #

优先选方案1，用onCompleted回调是最符合GraphQL组件设计意图的方式，代码也最简洁；如果不支持这个参数，方案2的Ref标记是最轻量的解决办法；方案3适合需要更精细控制状态的场景。

内容的提问来源于stack exchange，提问作者Nicolas S.Xu