Question

应用程序.js：

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

function App() {

  const [id, setId] = useState();

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

export default App;

和

登录.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>
    )
}

错误似乎出现在 onSubmit={setId()} 上的 App.js 中，因为当我将其注释掉时，它会起作用。

这里的想法是，当您单击“登录”按钮时，<Form.Control type="text" ref={idRef} required/> 中的值存储在 App.js 的 useState 中。我可以在不获取 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 的情况下执行此操作吗？

Answer 1

只需使用不带括号 () 的 setId。当您在函数旁边写括号时，这意味着您实际上正在调用该函数，这会导致重新渲染。但就您而言，您只想将函数的引用传递给子组件。

<Login onIdSubmit={setId}/>

并将 onSubmit 重命名为 onIdSubmit，正如@Vaibhav 评论的那样。

错误：重新渲染过多。 React 在使用 useState()

1 个答案: