Javascript React应用程序-帮助我找到无限渲染循环的原因

调用appendModule函数时，我不知何故导致了无限渲染循环。我认为这是由

rows.js

组件引起的，因为我最近将4行拆分为单独的组件，然后将它们导入到一个主

rows.js

中，这就是问题的开始。（注意：我知道现在事情不是很整洁/理想）。

main.js

在这个组件中，我将模块组件推入一个数组onclick

import React, { Component } from "react";
import Mod0 from "./modules/mod0";
import Mod1 from "./modules/mod1";
import Mod2 from "./modules/mod2";
class Main extends Component {
  constructor() {
    super();
    this.state = {
      moduleArray: this.moduleArray
    };

    this.moduleArray = [];
  }
  appendModule = x => e => {
    switch (x) {
      case 0:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod0 />
          </div>
        );
        break;
      case 1:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod1 />
          </div>
        );
        break;
      case 2:
        this.moduleArray.push(
          <div
            key={this.moduleArray.length}
            id={this.moduleArray.length}
            style={{ fontSize: 0, lineHeight: 0 }}
          >
            <Mod2 />
          </div>
        );
        break;
      default:
    }
    this.setState({
      moduleArray: this.moduleArray
    });
  };

  console = () => {
    return (
      <div
        id="console-root"
        style={{ display: this.state.consoleState ? "block" : "none" }}
      >
        <div id="console">
          <input
            onClick={this.appendModule(0)}
            value="Single col"
            type="submit"
          />
          <input
            onClick={this.appendModule(1)}
            value="Double col"
            type="submit"
          />
          <input
            onClick={this.appendModule(2)}
            value="Triple col"
            type="submit"
          />
        </div>
      </div>
    );
  };

  render() {
    return (
      <>
        {this.console()}
        <div id="email-root">
          <div id="mods">{this.moduleArray}</div>
        </div>
      </>
    );
  }
}
export default Main;

rows.js

我认为是新的

组件导致了问题。这些行在这样的数组中，以便我以后可以添加和删除它们。如果直接包括，则问题仍然存在

import React from "react";
import Row0 from "./rows";
import Row1 from "./rows";
import Row2 from "./rows";
import Row3 from "./rows";
class Rows extends React.Component {
  constructor() {
    super();
    this.state = {
      rowArray: this.rowArray
    };
    this.rowArray = [
      <Row0 key="0" />,
      <Row1 key="1" />,
      <Row2 key="2" />,
      <Row3 key="3" />
    ];
    console.log(this.rowArray);
  }
  render() {
    return <>{this.rowArray}</>;
  }
}
export default Rows;

---

我相信您的问题可能是，您不是将函数传递给

onClick

，而是调用函数。请尝试以下方法：

onClick={（）=>{this.appendModule（0）}}

让我知道进展如何

注: 这使用了ES6中引入的箭头函数。你也可以

onClick={this.appendModule.bind（this，0）}

如果前一种方法不起作用

import React from "react";
import Row0 from "./rows";
import Row1 from "./rows";
import Row2 from "./rows";
import Row3 from "./rows";
class Rows extends React.Component {
  constructor() {
    super();
    this.state = {
      rowArray: this.rowArray
    };
    this.rowArray = [
      <Row0 key="0" />,
      <Row1 key="1" />,
      <Row2 key="2" />,
      <Row3 key="3" />
    ];
    console.log(this.rowArray);
  }
  render() {
    return <>{this.rowArray}</>;
  }
}
export default Rows;

import React from "react";
class Row1 extends React.Component {
  render() {
    return (
      <tr>
        <td
          className="mobile-pad"
          style={{
            color: "#4a4a4a",
            fontFamily: '"Campton", Helvetica, Arial, sans-serif',
            fontSize: "26px",
            lineHeight: "36px",
            textAlign: "left",
            paddingTop: 0,
            paddingBottom: "18px"
          }}
        >
          This is header copy
        </td>
      </tr>
    );
  }
}
export default Row1;