reactjs - 为什么我的网站在输入文本时会重新渲染多次？

Question

我正在构建一个反应应用程序，用户在其中输入他们的姓名，但是每当我在输入字段中输入任何单词时，它都会重新呈现。我已经尝试过useCallback和memo但它没有用。

上下文 api 用于传递名称。

这是我的代码

import React, { useState, useContext, memo, useRef } from "react";
import "./login.css";
import { AuthContext } from "./context";

const Login = () => {
  const renders = useRef(0);
  const [name, setName] = useState("");
  
   const {
     authContext: { logins },
   } = useContext(AuthContext);

  
  const inputEvent = React.useCallback(
    (e) => {
      e.preventDefault();
      setName(e.target.value);
    },
    [setName]
  );

   const buttonClicked = () => {
       console.log(data);
       if (name.length > 0) {
         logins(name);
         localStorage.setItem("user", name);
       } else {
         alert("Please enter your name");
       }
     };
  return (
    <>
      <div className="login">
        <h2 style={{ textAlign: "center" }}>Coupon Collector</h2>
        <form className="nameField">
          <input
            className="inputField"
            type="text"
            placeholder="First Name"
            name="name"
            value={name}
            onChange={inputEvent}
          />
        </form>
        <div>renders {renders.current++}</div>
        <div className="buttonDiv">
           <button onClick={buttonClicked} className="button">
            Let's Go
          </button> 
        </div>
      </div>
    </>
  );
};

export default Login;

标签： reactjsformsuse-state