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

Question

该代码显示数组中的用户记录。我还创建了一个 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>
    );
  }
}

Answer 1

来自ReactJS docs :

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

由于 updateCount() 正在调用 setState()，因此您正在 render 中调用 setState。您需要重新设计代码，可能在 state 中创建数组并在渲染中使用 map 。

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