Блог

Главная - Вопросы по программированию - Ошибка: Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл при использовании useState()

Ошибка: Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл при использовании useState()

#reactjs #create-react-app

Вопрос:

App.js:

 import React, { useState } from "react";
import Login from "./Login";

function App() {

  const [id, setId] = useState();

  return (
    <>
      {id}
      <Login onSubmit={setId()}/>
    </>
  );
}

export default App;

и

Login.js:

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

Похоже, что ошибка заключается в App.js на onSubmit={setId()} том, потому что, когда я это комментирую, это работает.

Идея здесь заключается в том, что при нажатии кнопки «Войти» значение в <Form.Control type="text" ref={idRef} required/> сохраняется в состоянии использования из App.js. Могу ли я сделать это, не получая Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. ?

Комментарии:

1. <Login onSubmit={setId} /> , просто передайте функцию, не вызывайте ее

2. также имя prop в компоненте входа в систему-это onIdSubmit , когда вы передаете prop onSubmit для входа в свой компонент приложения. Убедитесь, что вы используете одно и то же имя реквизита в обоих местах

Ответ №1:

Просто используйте setId без скобок () . Когда вы пишете скобку рядом с функцией, это означает, что вы на самом деле вызываете функцию, которая вызывает повторные вызовы. Но в вашем случае вы просто хотите передать ссылку на свою функцию своему дочернему компоненту.

 <Login onIdSubmit={setId}/>

А также переименовать onSubmit в onIdSubmit , как прокомментировал @Vaibhav.

Метки: ,