Question

我在调用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;

mod0.js以下组件是包含行组件的模块的示例。

import React from "react";
import Rows from "./../rows/rows";
class Mod1 extends React.Component {
  render() {
    return (
      <table
        id="Table1"
        cellSpacing={0}
        cellPadding={0}
        border={0}
        width="100%"
      >
        <tbody>
          <tr>
            <td
              valign="top"
              align="center"
              style={{ borderCollapse: "collapse", borderWidth: 0 }}
              bgcolor="#D9E1E2"
            >
              <table
                className="Table2"
                bgcolor="#FFFFFF"
                cellSpacing={0}
                cellPadding={0}
                border={0}
                width={680}
              >
                <tbody>
                  <tr>
                    <td
                      style={{ paddingTop: 24, paddingBottom: 24 }}
                      align="center"
                    >
                      <table
                        className="Table3"
                        align="center"
                        cellSpacing={0}
                        cellPadding={0}
                        border={0}
                        width={604}
                      >
                        <tbody>
                          <Rows />
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}
export default Mod1;

rows.js我认为是导致问题的新<Rows />组件。这些行位于这样的数组中，以便以后可以添加和删除它们。如果直接包含该问题，问题仍然存在。

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;

row1.js导入rows.js

的单个行组件之一的示例

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;

Answer 1

我相信您的问题可能是，您正在调用函数而不是将函数传递给onClick。尝试以下方法： onClick={() => { this.appendModule(0) }} 让我知道进展如何

注意：

这使用了ES6中引入的箭头功能。你也可以 onClick={ this.appendModule.bind(this, 0) }，如果前一种方法无效。

React App-帮助我找到无限渲染循环的原因

1 个答案:

注意：