Question

你好，我有一个问题，我有一个套接字，该套接字向我返回一个值，然后又有状态加载，该状态加载为true（加载），当我获取信息时将其设置为false，但是当我的变量为总是相同的值，并且我更新页面时显示的加载速度很快，并且已经离开

我想知道如何解决这个问题（例如，当我进入页面时放入一个团队或类似的东西，然后检查后端是否存在这样的值以使false返回我的加载中）

我的app.js：

import React, { Component } from 'react';
import './App.css';
import io from 'socket.io-client';
import Loading from './components/Loading'
import Players from './components/Players'
class App extends Component {

  constructor(props, context) {
    super(props, context);
    this.socket = null;
    this.state = {
      queue: [],
      loading: true,
      players: []
    };
  }

  componentDidMount() {
    // io() not io.connect()
    this.socket = io('http://localhost:9000');


    const player1 = {
      id: 1,
      name: "spt",
      mmr: 1000,
    }
    const player2 =  {
      id: 2,
      name: "teste",
      mmr: 1005,
    }

    this.socket.emit('addPlayer-Queue', player1);


      this.socket.on('queue', (queue) => {
        console.log('ae');
        if (queue === 1) {
          this.setState({
            queue: queue,
            loading: false,
            players: player2
          })
        }else if(queue != 1)
        this.setState({
          queue: queue,
          loading: true,
        })
      });

    this.socket.open();
  }

  componentWillUnmount() {
    this.socket.close();
  }
  render() {
    const { queue } = this.state;
    const { loading } = this.state;
    const { players } = this.state
    const visibility = loading ? 'hidden' : 'visible';
    return (
     <div className="container">

       <div className="result">
       </div>
       <div className="ctnFlex">
         <div className="playerOne">PlayerOne</div>

           <Loading loading={loading} message='in queue.' />
         <div className="playerTwo" style={{ visibility }}>
         <Players players={players}/>
         </div>

       </div>

     </div>
   )
   }
}

export default App;

在我的componentDidMount（）中，我打开我的套接字连接：

  componentDidMount() {
    // io() not io.connect()
    this.socket = io('http://localhost:9000');


    const player1 = {
      id: 1,
      name: "spt",
      mmr: 1000,
    }
    const player2 =  {
      id: 2,
      name: "teste",
      mmr: 1005,
    }
    this.socket.emit('addPlayer-Queue', player1);
      this.socket.on('queue', (queue) => {
        console.log('ae');
        if (queue === 1) {
          this.setState({
            queue: queue,
            loading: false,
            players: player2
          })
        }else if(queue != 1)
        this.setState({
          queue: queue,
          loading: true,
        })
      });

    this.socket.open();
  }

我的负载：

import React from 'react' 

import Spinner from 'react-spinkit' 
import ReactLoading from 'react-loading';

const Loading = ({ loading, message }) => { 
    console.log(loading);
    return loading ? (
            <div className='queue'> 
                <ReactLoading type={"spinningBubbles"} height={150} width={100}  color={"blue"} />
                <h2 className='message'> 
                    {message} 
                </h2> 
            </div> 
    ) : (<h2>Matched</h2>)
} 

export default Loading

我的播放器：

import React from 'react' 


const Players = ({ players }) => { 
    console.log(players);
    return ! players ? (
        <div>
            <h2>o</h2>
        </div>
    ) : <div>
    <p>{players.id}</p>
<h2>{players.name}</h2>
</div>
} 

export default Players;

反应js节点js socket.io加载

0 个答案: