太多的重新渲染。 React 限制渲染的数量？ Socket.io 聊天应用

Question

我正在使用 socket.io 制作一个简单的实时聊天网络应用程序，在前端部分我收到 Too many render error ，即使我所有的setState 在 Component 的 return 部分之外我附上了 React 前端部分 App.js 的代码

请原谅我的幼稚态度，我是一名新手程序员，这是我的第一个问题

function App() {
  const [name, setName] = useState("");
  const [msg, setMsg] = useState("");
  const [chat, setChat] = useState([]);

  useEffect(() => {

    socket.on("connect", () => {
      console.log( `Connected`);
    });

    socket.on("message", (msg_obj) => {
      ChatList(msg_obj);
    });
    
  }, []);

  function ChatList(msg_obj){
    setChat((chat) => [...chat, msg_obj]);
  }

  function addChat () 
  {
    const id = socket.id;
    socket.emit("message", { id, msg, name });
    setMsg("");
  };

  function settingname(tobenamed)
  {
    setName(tobenamed);
  }

  function settingmessage(messagevalue)
  {
    setMsg(messagevalue);
  }

  return (
    <div className="App">
      <header className="App-header">

        <div className="chat-area">
          {chat.map((msg_obj) => {
            return (
            <span className="Block">
              <h4 key={msg_obj.id}>{msg_obj.name}</h4>
              <p> {msg_obj.msg} </p>
            </span>
            )
          })}
        </div>

        <form id="chatter-form">
          <input
            type="text"
            placeholder="Enter username"
            className="username-field"
            onChange={
              (event) => {
               settingname(event.target.value);
                }
            }
          />

          <button className="username-submit" >Go</button>

          <input
            type="text"
            placeholder="Enter username"
            className="message-field"
            onChange={(event) => {
              settingmessage(event.target.value);
            }}
          />

          <button className="message-submit" onClick={addChat()}>SEND</button>
        </form>
      </header>
    </div>
  );
}```

Answer 1

您的按钮正在调用 addChat，因为它后面有括号。确保传递对函数的引用而不是调用它。

你想要 addChat 而不是 addChat()

<button className="message-submit" onClick={addChat}>SEND</button>

太多的重新渲染。 React 限制渲染的数量？ Socket.io 聊天应用

Too many re-renders. React limits the number of renders ? Socket.io Chat App

javascript

reactjs

socket.io

react-hooks