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

Question

该代码显示数组中的用户记录。我还创建了一个updateCount()对内容显示的用户进行计数的函数。

我可以看到提醒的计数结果我可以在控制台中

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

updateCount = userId => {
    ...some code missing
    this.setState({dataCount: count});
}

由于重新渲染，这会导致结果无限循环。无论如何，有没有办法摆脱setState该UpdateCount()功能，使我能够很好地显示计数结果或任何更好的可能方法。

这是代码

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>
    );
  }
}

Answer 1

来自ReactJS 文档：

\n\n

\n

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

\n

\n\n

既然updateCount()正在呼叫setState()，那么您正在setState呼入render。您需要重新设计代码，可能在渲染中创建数组state并使用map。

\n\n

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

\n

Answer 2

您正在render()调用this.updateCount(person.id)执行setState. 因此会发生重新渲染，然后this.updateCount(person.id)再次调用。就这样继续下去..（无限循环）