Question

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

我可以在控制台中看到已更改的计数结果。

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

    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

您正在使用render()的{{1}}方法this.updateCount(person.id)进行调用。因此，发生了重新渲染，然后再次调用setState。然后继续..（无限循环）

Answer 2

来自ReactJS docs：

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

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

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

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

2 个答案: