ReactJs 双渲染

问题描述 投票:0回答:1

当我尝试刷新页面时,它会打印“1”两次。

但我认为我没有使用任何 useState 或变量更新或状态更改。

你能告诉我哪里错了吗?

import "./styles.css";
import React, { useState, useEffect, useRef } from "react";
//import { io } from "socket.io-client";
//const socket = io("ws://localhost:4000");

export default function App() {
  const newUser = () => {
    //socket.emit("newUser", { socketID: socket.id });
  };

  const checkUser = () => {
    //socket.emit("checkUser", { socketID: socket.id });
  };

  const resetUser = () => {
    //socket.emit("resetUser", { socketID: socket.id });
  };

  const checkSocket = () => {
    //console.log(socket);
  };

  const disconnectSocket = () => {
    //socket.emit("disconnect");
  };

  useEffect(() => {
    console.log("1");
  }, []);

  /*useEffect(() => {
    console.log("2", socket);
    //if(socket.id) socket.emit("newUser", {socketID: socket.id});
    //socket.on("checkUser", data => console.log("check", data));
    //socket.on("newUserResponse", data => console.log("newUserResponse", data));
    return () => {
    };
  }, [socket]);
  */

  return (
    <div className="App">
      <div>
        <button onClick={newUser}>New User</button>
      </div>
      <div>
        <button onClick={checkUser}>Check User</button>
      </div>
      <div>
        <button onClick={resetUser}>Reset User</button>
      </div>
      <div>
        <button onClick={checkSocket}>Check Socket</button>
      </div>
      <div>
        <button onClick={disconnectSocket}>Disconnect Socket</button>
      </div>
    </div>
  );
}
reactjs react-hooks rendering rerender
1个回答
0
投票

也许你有两个渲染,因为你保留了严格模式

© www.soinside.com 2019 - 2024. All rights reserved.