[英]React App - Help me locate the cause of an infinite render loop
I'm somehow causing an infinite render loop when calling the appendModule function. 我在调用appendModule函数时以某种方式导致无限渲染循环。 I think it's being caused by the rows.js
component as I recently split 4 rows out into seperate components and then imported them into one master rows.js
and thats when the problem started. 我认为这是由rows.js
组件引起的,因为我最近将4行拆分为单独的组件,然后将它们导入到一个主rows.js
,这就是问题开始的时间。 (note: I understand things aren't very tidy/optimal right now). (注意:我知道事情现在还不是很整洁/最佳)。
main.js
In this component I push module components into an array onclick 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
The below component is an example of the modules that contain the rows component. 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
The new <Rows />
component that I think is causing the problem. rows.js
我认为是导致问题的新<Rows />
组件。 The rows are in an array like that so that I can add and remove them later. 这些行位于这样的数组中,以便以后可以添加和删除它们。 The problem persists if that are directly included. 如果直接包含该问题,则问题仍然存在。
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
An example of one of the individual row components imported into rows.js
row1.js
导入rows.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;
I believe your issue could be that instead of passing the function to onClick
, you're calling the function. 我相信您的问题可能是不是在将函数传递给onClick
而是在调用函数。 Try this instead: onClick={() => { this.appendModule(0) }}
and let me know how it went 请尝试以下方法: onClick={() => { this.appendModule(0) }}
,让我知道它的运行情况
this uses arrow functions, introduced in ES6. 它使用了ES6中引入的箭头功能。 You can also do onClick={ this.appendModule.bind(this, 0) }
if the former way doesn't work. 如果前一种方法不起作用onClick={ this.appendModule.bind(this, 0) }
也可以执行onClick={ this.appendModule.bind(this, 0) }
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.