即使我将数组用作第二个参数，UseEffect keeps也会在每次刷新时运行分派

Question

我正在构建游戏Quiplash的副本，我决定为我的项目使用React / Redux / Node.js /和websockets。目前，我正试图通过将第二个空数组传递给它，从而像componentDidMount一样使用useEffect，这样操作dispatch（addPlayer（player））仅在用户第一次访问页面时运行。

即使分派，roomID和props.location.search从未更改，其他useEffect也在每次刷新后运行。

我编写此功能组件的方式有问题吗？

这是我的MainLobby.js组件页面。

import React, {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux';
import queryString from 'query-string';
import Game from '../Game/Game';
import io from 'socket.io-client';
import { Button } from 'semantic-ui-react';
import {setRoom} from '../../actions/joinRoomActions'
import {addPlayer, removeAllPlayers, startGame, getPlayers} from '../../actions/gameActions'

let socket;



export const MainLobby = (props) => {
    const dispatch = useDispatch();
    const roomID = useSelector(state => state.userHome.room_id)
    const ENDPOINT = 'localhost:3000'
    const gameStarted = useSelector(state => state.game.gameStarted)

    useEffect(() => {
            const {name, room} = queryString.parse(props.location.search)
            socket = io(ENDPOINT);
            socket.emit('join',  {name, room}, () => {});
            return() => {
                socket.emit('disconnect');
                socket.off();
            }
    }, [props.location.search]);
    console.log(props.location.search)
    useEffect(() => {
        dispatch(setRoom(roomID))
    }, [dispatch, roomID])

    useEffect(() => {
        const player = queryString.parse(props.location.search)
        dispatch(addPlayer(player))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        const {room} = queryString.parse(props.location.search)
        dispatch(getPlayers(room))
    }, [dispatch, props.location.search])



    if(gameStarted === true) {
        return (<Game/>)
    } else {
    return (
        <div>
            <h1>Main Lobby</h1>
            <div className='main-lobby-screen'>
                <button onClick={()=> dispatch(removeAllPlayers())}>Clear Lobby</button>
                <p> Users currently in the lobby Max 8</p>

                <Button onClick={() => dispatch(startGame())}>Start Game</Button>
            </div>
        </div>
    )}
}

export default MainLobby

主要用户从登录页面路由到MainLobby。我正在使用从“ react-router-dom”重定向。我的主应用程序看起来像这样...

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { LandingPage } from './components/Landing/LandingPage.js';
import  {UserHomepage } from './components/UserHomepage/UserHomepage.js';
import JoinRoom from './components/joinRoom/JoinRoom.js';
import MainLobby from './components/MainLobby/MainLobby.js';

function App() {
  return (
    <div>
       <BrowserRouter>
      <Route exact path="/" component={LandingPage}/>
      <Route exact path='/homepage' component={UserHomepage} />
      <Route exact path='/join-room' component={JoinRoom} />
      <Route exact path='/main-lobby' component={MainLobby}/>
      </BrowserRouter>
    </div>
  );
}

export default App;


"name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "jquery": "^3.4.1",
    "query-string": "^6.8.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-memo": "^0.3.1",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "socket.io-client": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "0.0.0-38dd17ab9"
  }
}

在上面我已经包含了我的package.json，以防错误是由于依赖引起的。希望其他人遇到此错误，因为我到处都在寻找答案，但是还没有找到答案！