Я хочу сделать запись чата в реальном чате.на реагировать

Question

Я создаю чат-сеть по реакции.Он использует socket.io Получить значения в массиве и распечатать данные через карту.Однако вместо сохранения значения, полученного ранее, оно просто меняется на другое значение.Я хочу, чтобы новое значение было отмечено, когда цена остается, а значение изменяется на другое значение.

import React, { Component } from "react";
  import socketIOClient from "socket.io-client";
  import "./App.css";

  class App extends Component {
    constructor() {
      super();
      this.state = {
        endpoint: "http://xx.xxx.xxx.xxx:3000/",

        text: '',
        log: [

        ]
      };
    }

    handleChange = (e) => {
      this.setState({
        [e.target.name]: e.target.value
      })
    }


    send = () => {
      const socket = socketIOClient(this.state.endpoint);
      socket.emit('change color', this.state.text);
    }




    render() {


      const socket = socketIOClient(this.state.endpoint);
      socket.on('change color', (col) => {
        this.setState({
          log : col
        })
      })

      return (
          <div style={{ textAlign: "center" }}>


            <input placeholder={'입력칸'} type={'text'} name={'text'} onChange={this.handleChange}/>
            <button onClick={() => this.send()}>전송하기</button>
            <ul id={'log'}>
              {this.state.log.map((contact, i) => {
                return (<LogInfo name={contact.name} message={contact.message} key={i} />);
              })}
            </ul>
          </div>
      )
    }
  }

  class LogInfo extends React.Component {
    render() {
      return(
          <li>{this.props.name} {this.props.message}</li>
      );
    }
  }

  export default App;

ответ - log: [message: foo]

Answer 1

Когда вы получаете событие change color, вы в настоящее время заменяете this.state.log на то, что вы получаете, я полагаю, что вам нужно добавить то, что вы получите, в свой массив log:

socket.on('change color', (col) => {
  this.setState({
    log: [
      ...this.state.log,
      col
    ]
  })
})

Кстати, в вашем фрагменте кода много неправильного:

this.state = {
  endpoint: "http://xx.xxx.xxx.xx:3000/",
};

Ваша конечная точка, вероятно, не должна находиться в вашем состоянии, если только ее изменение не вызовет повторную визуализацию вашего компонента.

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

constructor () {
  this.socket = socketIOClient('http://xx.xxx.xxx.xx:3000/');
  this.socket.on('change color', () => {
    // Do something
  });
}

send = () => {
  this.socket.emit('change color', this.state.text);
}

, а не каждый раз в вашей функции рендеринга.