Reactjs 错误：重新渲染过多。React限制渲染的数量，以防止在使用useState（）时出现无限循环 App.js： import React，{useState}来自“React”； 从“/Login”导入登录名； 函数App（）{ const[id，setId]=useState（）； 返回( {id} ); } 导出默认应用程序；

及

Login.js：

import React，{useRef}来自“React”
从“react bootstrap”导入{容器、表单、按钮}；
导出默认函数登录名（{onIdSubmit}）{
const idRef=useRef（）；
函数handleSubmit（e）{
e、 预防默认值（）
onIdSubmit（idRef.current.value）
}
返回(
输入您的Id
登录
创建一个新的Id
)
}

错误似乎出现在

onSubmit={setId（）}

上的App.js中，因为当我对它进行注释时，它是有效的

---

这里的想法是，当您单击“登录”按钮时，

中的值将存储在App.js中的useState中。我可以在不获得

错误的情况下执行此操作：重新渲染过多。React限制渲染的数量以防止无限循环。

？

只需使用不带括号的setId

（）

。当您在函数旁边写括号时，这意味着您实际上正在调用该函数，这会导致重新加载。但在您的情况下，您只需要将函数的引用传递给子组件

import React, { useRef } from 'react'
import { Container, Form, Button } from "react-bootstrap";

export default function Login({ onIdSubmit }) {

    const idRef = useRef();

    function handleSubmit(e) {
        e.preventDefault()

        onIdSubmit(idRef.current.value)
    }

    return (
        <Container className="align-items-center d-flex" style={{height: "100vh"}}>
            <Form  className="w-100" onSubmit={handleSubmit}>
                <Form.Group>
                    <Form.Label>
                        Enter your Id
                    </Form.Label>
                    <Form.Control type="text" ref={idRef} required/>
                </Form.Group>
                <Button type="submit" style={{marginRight: "5px", marginTop: "5px"}}>Login</Button>
                <Button variant="secondary" style={{marginTop: "5px"}}>Create A New Id</Button>
            </Form>
        </Container>
    )
}

---

并将onSubmit重命名为@Vaibhav评论的

onIdSubmit

。

，只需传递函数，不要调用它，因为登录组件中的道具名称是

onIdSubmit

，而您正在传递道具

onSubmit

，以登录应用程序组件。确保在两个位置使用相同的道具名称

import React, { useRef } from 'react'
import { Container, Form, Button } from "react-bootstrap";

export default function Login({ onIdSubmit }) {

    const idRef = useRef();

    function handleSubmit(e) {
        e.preventDefault()

        onIdSubmit(idRef.current.value)
    }

    return (
        <Container className="align-items-center d-flex" style={{height: "100vh"}}>
            <Form  className="w-100" onSubmit={handleSubmit}>
                <Form.Group>
                    <Form.Label>
                        Enter your Id
                    </Form.Label>
                    <Form.Control type="text" ref={idRef} required/>
                </Form.Group>
                <Button type="submit" style={{marginRight: "5px", marginTop: "5px"}}>Login</Button>
                <Button variant="secondary" style={{marginTop: "5px"}}>Create A New Id</Button>
            </Form>
        </Container>
    )
}

<Login onIdSubmit={setId}/>