React类组件中setState引发无限循环的解决方案咨询

你遇到的无限循环问题根源很明确：在render函数中调用了包含setState的updateCount方法。每次setState都会触发组件重新渲染，而重新渲染时又会再次调用updateCount，进而再次setState，形成了无限循环的闭环。

针对你的需求，最合理的解决方案是避免在render中触发状态更新，因为你要统计的用户数量是基于state.data的派生数据，完全可以直接计算而不需要存入state，或者在组件的生命周期钩子中处理计数更新。

方案一：直接在render中计算派生数据（推荐） #

既然计数是从state.data衍生出来的，我们不需要把它存在state里，直接在render时计算即可，这样既避免了状态同步问题，也不会触发不必要的重渲染：

import React, { Component } from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      data: [] 
    };
    // 用实例变量标记是否已触发过弹窗，避免重复弹出
    this.hasLoggedCount = false;
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "100", name: "Luke" },
        { id: "200", name: "Henry" },
        { id: "300", name: "Mark" }
      ]
    });
  }

  // 单独提取弹窗和控制台输出的逻辑
  logCount = (count) => {
    alert("counting: " + count);
    console.log("counting: " + count);
    this.hasLoggedCount = true;
  };

  render() {
    // 直接计算符合条件的用户数量（这里排除id为100的用户）
    const dataCount = this.state.data.filter(person => person.id !== "100").length;
    
    // 仅在数据加载完成后触发一次弹窗
    if (dataCount > 0 && !this.hasLoggedCount) {
      this.logCount(dataCount);
    }

    return (
      <span>
        <label>
          (---{dataCount}--)
          <ul>
            {this.state.data.map((person, i) => (
              <div key={i}>
                <div> {person.id}: {person.name} </div>
              </div>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

方案二：在生命周期钩子中更新状态（如果需要存到state） #

如果你确实需要把计数存在state里，可以在componentDidMount和componentDidUpdate中处理，只有当data变化时才更新计数，这样不会在render中触发状态更新：

import React, { Component } from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      data: [],
      dataCount: 0 
    };
  }

  componentDidMount() {
    const newData = [
      { id: "100", name: "Luke" },
      { id: "200", name: "Henry" },
      { id: "300", name: "Mark" }
    ];
    this.setState({ data: newData });
    this.updateCount(newData);
  }

  componentDidUpdate(prevProps, prevState) {
    // 只有当data发生变化时，才重新计算计数
    if (prevState.data !== this.state.data) {
      this.updateCount(this.state.data);
    }
  }

  updateCount = (data) => {
    const count = data.filter(person => person.id !== "100").length;
    alert("counting: " + count);
    console.log("counting: " + count);
    this.setState({ dataCount: count });
  };

  render() {
    return (
      <span>
        <label>
          (---{this.state.dataCount}--)
          <ul>
            {this.state.data.map((person, i) => (
              <div key={i}>
                <div> {person.id}: {person.name} </div>
              </div>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

关键说明 #

• 永远不要在render函数中调用setState：render是用来描述UI的，任何触发状态更新的操作都应该放在生命周期钩子或事件处理函数中，否则必然会引发无限循环。
• 派生数据无需存入state：像这种基于现有state计算出来的值，直接在render时计算是最优解，既减少了状态同步的复杂度，也避免了不必要的重渲染。

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