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

【问题标题】：Too many re-renders. React limits the number of renders ? Socket.io Chat App太多的重新渲染。 React 限制了渲染的数量？ Socket.io 聊天应用
【发布时间】：2021-10-21 21:48:12
【问题描述】：

我正在使用 socket.io 制作一个简单的实时聊天网络应用程序，在前端部分我得到 Too many render error ，即使我所有的 setState 都在返回部分之外零件我已经附上了 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>
  );
}```

【问题讨论】：

它将它们限制为一个非无限的数字。看起来很合理。

标签： javascript reactjs socket.io react-hooks

【解决方案1】：

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

你想要addChat 而不是addChat()

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

【讨论】：

非常感谢！！