Question

我无法理解为什么我的组件被无限地重新渲染

Parent Render：这部分很大，所以我只包括使用子组件的部分

 <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>

子组件-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的Child子组件-无法确定// //这是将无限地重新渲染的部分

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;
}

在TL：DR中，描述了此代码应该执行的操作，因为它使用指数来呈现基本方程式 x ^ a（+ /-/ * /÷）y ^ b 其中任何数字（x / a / y / b）随机加载为“？”而不是它的价值

然而，组件将无限地重新渲染，因此在显示时，它会不断随机更改“？”的哪个项目，从而使方程式无限闪烁并发生变化。最奇怪的是，操作员在无限渲染期间不会改变。

编辑：在我的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>;
};

这也可以无限渲染（如果我在此处的任意位置添加console.log语句，它将无限地记录日志），但是由于这不会更改显示的数据或干扰应用程序的其余部分，因此我在OP中未提及，但似乎更多的信息可能会导致更好的理解

Answer 1

每次渲染组件时，F都会在never内部重新计算。请注意，random值存储在Undeterminable内部，并且具有正确的行为。

您可以采用两种方法来解决问题：

您可以将operator放入props中以存储值。
或者，您可以使用useState钩子将random的值存储在状态中。

对于props，请确保将其导入，然后尝试执行以下操作：

random

子组件，无限重新渲染

1 个答案: