如何解决reactjs中的无限循环错误？答案

【问题标题】：How to resolve infinite loop error in reactjs?如何解决reactjs中的无限循环错误？
【发布时间】：2020-08-04 01:58:07
【问题描述】：

我正在使用来自 reactjs 的模态引导程序，其中 onLoad 我正在调用函数 captchGen() 并且我试图将验证存储在 H2 标记中

我收到无限循环错误：× 错误：重新渲染过多。 React 限制渲染次数以防止无限循环。

const Modals = (props) => {
const [validation , setValidation] = useState("");
const [result , setResult] = useState(0);
const [inputValue , setInput] = useState("");

const captchGen = () => {
    const data1 = Math.round(10 * Math.random());
    const data2 = Math.round(10 * Math.random());
    const str = ` Enter ${data1} + ${data2} `
    const sum = data1+data2
    setValidation(str);
    setResult(sum)
}

const handleInput = (e) => {
    setInput(e.target.value)
}


const captchValidation = () => {
    const x = result;
    const y = inputValue;
    if ( x === y) {
         alert("success")
    }
    else {
         alert("fail")
    }
}

  return (
    <Modal {...props} onLoad={captchGen()} size="sm" aria-labelledby="contained-modal-title-vcenter" centered>
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">Captcha</Modal.Title>
      </Modal.Header>
      <Modal.Body>
         <input type = "text" placeHolder = "Enter the number" onChange = { e => handleInput(e)}></input>
                <button onClick = {captchValidation} >Validate</button>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
        <Button variant="primary">Save changes</Button>
      </Modal.Footer>
    </Modal>
  );
};

export default Modals;

这里是模态代码

const HomePage = () => {
  const [modalShow, setModalShow] = useState(false);
  return (
    <Button variant="dark"
      onClick={() => setModalShow(true)}
    >Subscribe</Button>
    <Modals
      show={modalShow}
      onHide={() => setModalShow(false)}

    />
  )
}

【问题讨论】：

onLoad = {captchGen()} // 将其更改为 onLoad = {captchGen}
我没有得到这个`在H2标签内输入${data1} + ${data2}`

标签： reactjs

【解决方案1】：

因为您正在执行captchGen 函数，而不是传递对它的引用。

    const Modals = (props) => {

    const [validation , setValidation] = useState("");
    const [result , setResult] = useState(0);

    const captchGen = () => {
        const data1 = Math.round(10 * Math.random());
        const data2 = Math.round(10 * Math.random());
        const str = ` Enter ${data1} + ${data2} `
        const sum = data1+data2
        setValidation(str);
        setResult(sum);
    }


    return (
            <Modal
                {...props}
                onLoad = {captchGen}
                size="sm"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Captcha
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h2>{validation}</h2> 
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={props.onHide}>Close</Button>
                    <Button variant="primary">Save changes</Button>
                </Modal.Footer>
            </Modal>
    );
};

export default Modals;

【讨论】：

嗨 @Sreeram Padmanabhan
{validation}
没有渲染，我认为 captchGen 也没有渲染，因为当我控制台验证时它的空白和结果只有 0
还有其他属性可以调用吗？
如果你使用 react-bootstrap 中的 Modal，文档告诉我没有什么叫做 onLoad。但我可以看到onEnter
嗨@Sreeram Padmanabhan 非常感谢你现在它的工作，我已经对我的问题进行了更改，每次警报显示失败只有你能看看这个
handleInput(e)} value={inputValue}>

【解决方案2】：

您的模式有一个 onLoad 属性，它调用 captchGen()。

captchGen() 更改您的状态，重新渲染您的组件并重新启动循环。

将onLoad={captchGen()} 更改为onLoad={captchGen} 以将您的函数传递给onLoad，而不是直接调用它。

【讨论】：

嗨@Luze，如果我只是通过 onLoad={captchGen} 那么console.log 没有打印任何东西，我正在尝试渲染这个