0

I am trying to make a socket connection to my backend through my front end, but sme successfully

I declared my socket in my state and then opened the connection, but I don't know why this error:

code:

class App extends Component {
  constructor(props, context){
    super(props, context);
    this.state = {
      queue: '',
      socket: null
  };
  }
  componentDidMount() {
    // io() not io.connect()
    this.state.socket = io('http://localhost:9000');

    this.state.socket.on('queue', (queue) => {
      this.setState({
        queue
      })
    });

    this.state.socket.open();
  }

  componentWillUnmount() {
    this.state.socket.close();
  }
    render() {
        return (
            <div>
               <p> Queue: {this.state.queue}  </p>
            </div>
        )
    }
}
Improve this question
6
  • <p> Queue: {this.state.queue} </p> What sytnax is this? Is Queue meant to be a string or is that an object? Commented Nov 26, 2019 at 1:29
  • Could you provide the Error you get. Queue is a string Commented Nov 26, 2019 at 1:42
  • queue is an object, i change my stete to: this.state = { queue: {}, }; Commented Nov 26, 2019 at 2:27
  • and same rror :( Commented Nov 26, 2019 at 2:27
  • If queue is a object, you can't render it directly. You can render it's keys and/or values as strings.. do you want to render a object for users to see? Commented Nov 26, 2019 at 2:52

2 Answers 2

Reset to default
1

You should not set the state directly by using this.state.socket = ...

Instead of setting socket as a state, you can try using this.socket.

class App extends Component {
  constructor(props, context){
    super(props, context);
    this.socket = null;
    this.state = {
      queue: '',
  };
  }
  componentDidMount() {
    // io() not io.connect()
    this.socket = io('http://localhost:9000');

    this.socket.on('queue', (queue) => {
      this.setState({
        queue: queue
      })
    });

    this.socket.open();
  }

  componentWillUnmount() {
    this.socket.close();
  }

  render() {
      return (
          <div>
             <p> Queue: {this.state.queue}  </p>
          </div>
      )
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

× Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. in p (at App.js:33) in div (at App.js:32) in App (at src/index.js:5)
ReactDOM.render(<App />, document.getElementById('root'));
@gabriel sorry for my late response, I am unsure what this.state.queue's type is, can you do a little debug, console.log(queue) in your event listening?
@gabriel if queue is an object, you have to convert it into an array. You can use something like Object.keys(queue).map(key => queue[key])
is a object thansk bro.
0

Don't set a state object directly. Set it with setState({}).

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

    socket.on('queue', (queue) => {
      this.setState({
        queue,
      });
    });
    socket.open();

    this.setState({ socket });
  }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.