Jump to content
IObit Forum
Top Free Driver Updater Tools Best 25 PC Optimization Software Best 22 Antimalware Best 22 Uninstaller Software IObit Coupons & Discount Offers PC Optimizer

How can I maintain state and “this” with react component functions


Stella67
 Share

Recommended Posts

Currently, when socket.io emits a 'gmessage' from my server, and the socket in my component catches it, my entire state is replaced.

 

So the current flow is like this:

 

I emit a message from the component, it goes to my server, then to the watson API. The API sends a response to my server, and the server sends that to the component.

 

So that first message creates the connection to socket.io, then the second socket.io event is caught on the same connection firstbankcard.

 

Is there a better way to set up the connection to socket.io and handle both the emit and the "on gmessage" parts of this? Thank you for any tips in advance. I'm still new to react, so anything you see that I should do differently is helpful!!

 

...

import {Launcher} from 'react-chat-window'

import io from 'socket.io-client';

 

import { getUser } from '../actions/userActions';

 

class Workshop extends Component {

 

constructor() {

super();

this.state = {

messageList: []

};

}

 

_onMessageWasSent(message) {

this.setState({

messageList: [message, ...this.state.messageList]

})

 

var socket = io.connect('http://localhost:5000');

 

socket.emit('message', { message });

 

var myThis = this

var myState = this.state

 

socket.on('gmesssage', function (data) {

console.log(data);

myThis.setState({

messageList: [{

author: 'them',

type: 'text',

data: data

}, ...myState.messageList]

})

})

}

 

render() {

return (

<Grid container className="DashboardPage" justify="center">

<Grid item xs={12}>

<div>Welcome to your Workshop</div>

<TeamsTaskLists />

</Grid>

 

<Launcher

agentProfile={{

teamName: 'Geppetto',

imageUrl: 'https://geppetto.ai/wp-content/uploads/2019/03/geppetto-chat-avi.png'

}}

onMessageWasSent={this._onMessageWasSent.bind(this)}

messageList={this.state.messageList}

showEmoji

/>

 

</Grid>

);

}

}

 

const mapStatetoProps = state => ({

user: state.user

});

 

export default connect(

mapStatetoProps,

{ getUser }

)(Workshop);

 

 

Have any one found any solution regarding my question?

Link to comment
Share on other sites

  • 8 months later...

Depending on your application, I think Redux would be overkill for this.

 

I would change to a lambda expression here though to avoid having to save this references:

 

socket.on('gmesssage', data => {

console.log(data);

this.setState({

messageList: [{

author: 'them',

type: 'text',

data: data

}, ...this.messageList]

})

})

You might consider using the new React Hooks also e.g. turn it into a stateless component and use useState:

 

const Workshop = () => {

const [messageList, setMessageList] = useState([]);

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...