[英]Child component, infinitely re-rendering
I am having trouble understanding why my component is being infinitely re-rendered我无法理解为什么我的组件被无限重新渲染
Parent Render: this part is incredibly large so I'm only including the section that uses the child component父渲染:这部分非常大,所以我只包括使用子组件的部分
<Container
style={{ alignItems: "center", height: 350, width: 1000 }}
>
<RenderQuestion
questionVersion={this.state.questionVersion}
base1={this.state.base1}
base2={this.state.base2}
exp1={this.state.exp1}
exp2={this.state.exp2}
ansbase={this.state.ansbase}
ansexp={this.state.ansexp}
multiple={this.state.multiple}
// EDIT: it might be a bit confusing but multiple here
is just a randomly generated number
/>
...
</Container>
Child Component - RenderQuestion //this works normally子组件 - RenderQuestion //这正常工作
const RenderQuestion = (props) => {
switch (props.questionVersion) {
...
case 11:
return(
<Row style={{ paddingTop: "50px", fontFamily: "courier", fontWeight: "bold", fontSize: 70, }}>
{/* Left Side */}
<Col style={{
textAlign:"right"
}}>
<Undeterminable
operator={props.multiple}
base1={props.base1}
base2={props.base2}
exp1={props.exp1}
exp2={props.exp2}
/>
</Col>
{/* Equal Sign */}
<Col xs="1">=</Col>
{/* Right Side */}
<Col xs="4" style={{
textAlign:"left"
}}>
<span>
{props.ansbase}<sup>{props.ansexp}</sup>
</span>
</Col>
</Row>
);
...
Child's Child Component - Undeterminable //This is the part that is getting infinitely re-rendered Child's Child Component - Undeterminable //这是无限重新渲染的部分
const Undeterminable = (props) => {
let operator = "";
let result = "";
// random 1-4
let random = Math.floor(Math.random()*4)+1;
switch(props.operator) {
case 1:
operator = "+"
break;
case 2:
operator = "-"
break;
case 3:
operator = "x"
break;
case 4:
operator = "÷"
break;
};
switch(random){
case 1:
result = <span>
?<sup>{props.exp1}</sup>
{" "} {operator} {" "}
{props.base2}<sup>{props.exp2}</sup>
</span>
break;
case 2:
result = <span>
{props.base1}<sup>?</sup>
{" "} {operator} {" "}
{props.base2}<sup>{props.exp2}</sup>
</span>
break;
case 3:
result = <span>
{props.base1}<sup>{props.exp1}</sup>
{" "} {operator} {" "}
?<sup>{props.exp2}</sup>
</span>
break;
case 4:
result = <span>
{props.base1}<sup>{props.exp1}</sup>
{" "} {operator} {" "}
{props.base2}<sup>?</sup>
</span>
break;
}
return result;
}
To TL:DR depict what this code is supposed to do is it renders a basic equation with exponents x^a (+/-/*/÷) y^b where any of the numbers (x/a/y/b) are randomly loaded as a "?" TL:DR 描述此代码应该做什么是它呈现一个基本方程,其中指数 x^a (+/-/*/÷) y^b 其中任何数字 (x/a/y/b) 是随机加载为“?” instead of its value
而不是它的价值
However the component is being infinitely re-rendered so when displayed, it is constantly randomly changing which item is the "?", causing the equation to infinitely flicker and change.然而,该组件正在无限地重新渲染,因此在显示时,它会不断随机改变“?”哪个项目,导致方程无限闪烁和变化。 The wierdest thing about this is that the operator never changes during the infinite render.
最奇怪的是,操作符在无限渲染期间永远不会改变。
EDIT: In Case 10 of my RenderQuestion
I use a different child component Multiple
which is this:编辑:在我的
RenderQuestion
案例 10 中,我使用了一个不同的子组件Multiple
,它是这样的:
const Multiple = (props) => {
let result = [];
for(let i = 0; i < props.multiple -1; i++){
result.push(<>{props.base1}<sup>{props.exp1}</sup> + </>)
}
return <span>{result}</span>;
};
which also infinitely renders (if i add console.log statements anywhere here, it will infinitely log), but since this doesn't change the displayed data or interfere with the rest of the app, I didnt mention it in the OP, but it seems more information might lead to a better understanding它也无限渲染(如果我在这里的任何地方添加 console.log 语句,它将无限记录),但是由于这不会更改显示的数据或干扰应用程序的其余部分,我没有在 OP 中提到它,但它似乎更多的信息可能会导致更好的理解
Every time your component is rendered, random
is recalculated inside of Undeterminable
.每次渲染组件时,都会在
Undeterminable
内重新计算random
。 Notice that operator
value is stored inside of props
, and that has the correct behavior.请注意,
operator
值存储在props
,并且具有正确的行为。
There are a couple of approaches you can take to fix your problem:有几种方法可以解决您的问题:
random
into your props
to store the value.random
放入props
以存储该值。random
in the state, using something like the useState
hook.useState
钩子之类的东西将random
的值存储在状态中。 For useState
, make sure you import it and then try something like:对于
useState
,请确保导入它,然后尝试以下操作:
import React, { useState } from 'react';
const Undeterminable = (props) => {
// random 1-4
const [random] = useState(Math.floor(Math.random() * 4) + 1);
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.