React类组件调用this.setState触发最大更新深度超出错误原因及解决

先聊聊第一个疑问：为什么日志只打印一次？ #

你最开始的代码逻辑其实没问题，日志只出现一次是React组件更新机制的正常表现：当API请求完成后loading变为false，组件会触发一次重渲染并打印日志，但如果Redux中theData后续没有新的变化，组件就不会再次执行render——React只会在props或state发生改变时触发重渲染，并非你以为的“跳过loading判断”。

为什么在render里调用setState会触发无限循环？ #

这可是React的核心禁忌之一！你得牢牢记住：绝对不能在render方法里调用this.setState。

原因特别直白：render是组件渲染UI的入口，调用setState会直接触发组件重新渲染；而重渲染又会再次执行render方法，接着又触发setState，就这样形成了无限循环——每次渲染都触发更新，更新又强制渲染，直到超出React的最大更新深度限制，就抛出Maximum update depth exceeded错误了。

正确姿势：在哪里同步props到state？ #

如果你确实需要把Redux的props同步到组件自身的state（其实很多场景下直接用props渲染就足够，没必要多维护一份状态），应该在生命周期方法里处理：

1. 初始化阶段：在componentDidMount中同步初始的props数据
2. props更新阶段：在componentDidUpdate中判断props是否变化，再执行state更新

示例代码如下：

class YourComponent extends React.Component {
  state = {
    theData: null
  };

  componentDidMount() {
    // 组件挂载完成后，同步初始props到state
    this.setState({ theData: this.props.theData });
  }

  componentDidUpdate(prevProps) {
    // 仅当props中的theData发生变化时，才更新state
    if (prevProps.theData !== this.props.theData) {
      this.setState({ theData: this.props.theData });
    }
  }

  render() {
    const { loading } = this.props;
    const { theData } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    console.log('I am test message');
    return (
      {/* 这里渲染你的真实视图 */}
      <div>{/* 使用state中的theData渲染内容 */}</div>
    );
  }
}

额外提醒：如果没有特殊需求，直接用this.props.theData渲染视图会更简单，还能避免props和state不同步的潜在问题。

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