javascript — ReactJS: состояние возвращается к исходному значению при каждом обновлении

ReactJS: состояние возвращается к исходному значению при каждом обновлении

Я только начал ReactJS, и у меня все еще есть проблемы с пониманием состояний и реквизита.

Я пытаюсь создать приложение для чата, используя node.js, React и Socket.io. Все отлично работает на стороне сервера, однако мне сложно показать данные.

Вот моя проблема: у меня есть приложение с тремя компонентами, организованными как показано ниже:

  • Чат | — MessageList | — MessageInput

Я хочу, чтобы компонент Chat содержал список сообщений, который предоставляется сервером и компонентом messageInput.

Поскольку компонент чата будет содержать состояние, у меня есть конструктор, который инициализирует две переменные. Однако, когда я обновляю эти переменные из messageInput, компонент повторно визуализируется, вызывая повторный вызов конструктора и повторную инициализацию состояния.

 class Chat extends React.Component{ constructor(){ super() this.state = { messageList: [], username:null } } 

Я заметил, что данные, полученные с сервера, не приводят к установке состояния по умолчанию. Ввод сбрасывает значение состояний в компоненте «Чат», но, похоже, он работает, как задумано: сообщения отправляются на сервер и отображаются для других клиентов.

Я думаю, что я не совсем понял, как правильно установить состояние в компоненте. Вы найдете часть кода клиента ниже.

Заранее спасибо!

 const io = require('socket.io-client') const socket = io.connect('localhost:4242') class Chat extends React.Component{ constructor(props){ super(props) this.state = { messageList: [], username:null } } componentDidMount(){ if (this.state.username == null){ var user = prompt("Enter username:") this.setState( {username: user}, function(){ socket.emit('new_client', this.state.username) this.addMessage({ text: this.state.username   " has entered the chat", sender:"server", timestamp: Date.now()}) }) } socket.on('broadcast', data ={amp}gt;{ let newList = this.state.messageList.concat([data]) this.setState({messageList: newList}) }) } addMessage(object) { const array = this.state.messageList let newList = array.concat([object]) this.setState({ messageList: newList}) } sendMessage(messageString){ const message = {sender: this.state.username, text: messageString, timestamp: Date.now()} socket.emit('message', message) this.addMessage(message) } render(){ return( {amp}lt;div className="app"{amp}gt; {amp}lt;MessageList messageList={this.state.messageList} username={this.state.username} /{amp}gt; {amp}lt;MessageInput sendMessage={i={amp}gt; this.sendMessage(i)} /{amp}gt; {amp}lt;/div{amp}gt; ) } } class MessageList extends React.Component{ //USED TO DISPLAY CHAT MESSAGES, WORKS WELL } class MessageInput extends React.Component{ constructor(props){ super(props) this.state = { message:'' } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleChange(event){ this.setState({ message: event.target.value }) } handleSubmit(event){ this.props.sendMessage(this.state.message) this.setState({ message:'' }) } render(){ return( {amp}lt;form onSubmit={this.handleSubmit} className="send_message_form"{amp}gt; {amp}lt;input onChange={this.handleChange} value={this.state.message} placeholder="Input a new message" type="text"/{amp}gt; {amp}lt;/form{amp}gt; ) } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector