setState方法在Reactjs函数中导致结果的无限循环

该代码显示数组中的用户记录。 我还创建了一个updateCount（）函数，用于统计内容显示中的用户数

我可以在控制台中查看报警的计数结果

现在我想显示计数结果，为此，我在updateCount函数中初始化setState（）方法

    updateCount = userId => {

...some code missing

this.setState({dataCount: count});

    }

由于重新渲染，这会导致结果无限循环。 是否需要从UpdateCount（）函数中获取setState以启用我的显示 计数结果很好，或者是任何更好的方法

这是代码

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

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

  componentDidMount() {
    var userId = "100";

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

    this.updateCount = this.updateCount.bind(this);
  }

  updateCount = userId => {
    var count = 1;
    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) => {
              if (person.id == 100) {
                //this.updateCount(person.id);

                return (
                  <div key={i}>
                    <div>
                      {person.id}: {person.name}
                    </div>
                  </div>
                );
              } else {
                this.updateCount(person.id);
              }
            })}
          </ul>{" "}
        </label>{" "}
      </span>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
用户计数：[]
};
}
componentDidMount（）{
var userId=“100”；
这是我的国家({
数据：[
{
id:“100”，
姓名：“卢克”
},
{
身份证号码：“200”，
姓名：“亨利”
},
{
id:“300”，
名称：“马克”
}
]
});
this.updateCount=this.updateCount.bind（this）；
}
updateCount=userId=>{
var计数=1；
警报（“计数：+计数”）；
控制台日志（“计数：+count”）；
this.setState（{dataCount:count}）；
};
render（）{
返回(
（--{this.state.dataCount}--）

{this.state.data.map（（person，i）=>{
如果（person.id==100）{
//此.updateCount（person.id）；
返回(
{person.id}:{person.name}
);
}否则{
此.updateCount（person.id）；
}
})}
{“}
{" "}
);
}
}

您正在调用

render（）

方法

this.updateCount（person.id）

它执行

setState

。因此会发生重新呈现，然后再次调用

this.updateCount（person.id）

。事情还在继续。。（无限循环）

来自：

render（）函数应该是纯函数，这意味着它不修改组件状态，每次调用时返回相同的结果，并且不直接与浏览器交互

由于

updateCount（）

正在调用

setState（）

，因此您正在

render

中调用

setState

。您需要重新设计代码，可能需要在

状态中创建数组

，并在渲染中使用

映射

---

使用可能是个好主意，请确保使用条件语句，否则可能会遇到另一个无限循环

正是由于这个原因，

渲染中不应出现状态更新。updateCount（）函数，用于计算内容显示中的用户数-为什么要在内容显示中更新而不是更早？我想您也应该在getDerivedStateFromPropsSir Samb102中执行此检查。但我仍在努力想办法让它发挥作用