我正在构建游戏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))
    },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，以防错误是由于依赖引起的。希望其他人遇到此错误，因为我到处都在寻找答案，但是还没有找到答案！