javascript - 如何在reactjs中更新状态？

Question

我使用reactjs、nodejs、mongodb 创建了聊天应用程序。我将数据存储在 mongodb 中，但是在映射消息数组时，它没有在聊天应用程序中显示消息，为什么会这样？

我使用message状态变量来存储单个消息，并且所有这些单个消息都添加到messages数组(状态变量)中。我设置了 message: ""和 date : "" 但在我的情况下，即使在屏幕上显示消息之前，它也被设置为空字符串。如何映射消息并在聊天应用程序中显示所有消息？

代码:

服务器.js:

const express = require('express');
const mongoose = require('mongoose');
const socket = require('socket.io');
const message = require('./model/message')

const app = express();

const mongoURI = require('./config/keys').mongoURI;

mongoose.connect(mongoURI, {useNewUrlParser: true}, function (err,res) {

    if(err){
      console.log("There is error: " + err);
    }else{
      console.log("Connected to mongo database") 
    }

})

let db = mongoose.connection;

db.once('open', function() {
  console.log("Database is now connected");

  let io =  socket(server);

io.on("connection", function(socket){
  console.log("Socket Connection Established with ID :"+ socket.id)

  socket.on('disconnect', function(){
    console.log('User Disconnected');
  });

  let chat = db.collection('chat');

      socket.on('SEND_MESSAGE', function(data){
        let message = data.message;
        let date = data.date;

        // Check for name and message
        if(message !== '' || date !== ''){
            // Insert message
            chat.insert({message: message, date:date}, function(){
                socket.emit('RECEIVE_MESSAGE', [data]);
            });
        }
    });

    chat.find().sort({_id:1}).toArray(function(err, res){
      if(err){
          throw err;
      }
      // Emit the messages
      socket.emit('RECEIVE_MESSAGE', res);
    });

}) 

});


const port = 5000;

let server = app.listen(5000, function(){
  console.log('server is running on port 5000')
});

messages.js:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Create Schema
const MessageSchema = new Schema({
  message: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('Message', MessageSchema);

聊天.js:

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

export default class Chat extends Component {

    constructor(props){
        super(props);

        this.state = {
            message: '',
            date: '',
            messages: []
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.addMessage = this.addMessage.bind(this);

        this.socket = io('localhost:5000');
    }

    componentDidMount() {
      this.socket.on('RECEIVE_MESSAGE', data => {
          this.addMessage(data);
      });
    }

    sendMessage(event) {
      event.preventDefault();

      if(this.state.message !== ''){
        this.socket.emit('SEND_MESSAGE', {
            message: this.state.message,
            date: Date.now()
        });
      }
    };

    addMessage(data) {
      this.setState({
        messages: [...this.state.messages, data],
        message: '', 
        date: ''
      });
      console.log(this.state.messages);
    };

    render() {
        return (
        <div>
                <div id="status"></div>
                <div id="chat">
                    <div className="card">
                        <div id="messages" className="card-block">
                            {this.state.messages.map((message, index) => {
                                    return (
                                        <div key={index} className="msgBox"><p className="msgText">{message.message}</p></div>
                                    )
                            })}
                        </div>
                    </div>
                    <div className="row">
                        <div className="column">
                            <input id="inputmsg" type="text" placeholder="Enter Message...."
                            value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                        </div>
                        <div className="column2">
                            <button id="send" className="button" onClick={this.sendMessage}>Send</button>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}

console.log(this.state.messages) 的屏幕截图:

Answer 1

从服务器端代码来看，您似乎确实将 RECEIVE_MESSAGE 作为数组发出，因此 [ ...state.messages, data ] 会产生多维数组在 react 中被创建。您可以通过 RECEIVE_MESSAGE 发出一条消息，也可以将 addMessage 更改为 [ ...state.messages, ...data ]。

进一步解释一下:因此，首先您的 messages 状态设置为空数组。然后，所有旧消息都以数组(数据)形式来自套接字，并且 addMessage 被调用并尝试传播 state.messages 的元素(此时仍然为空)然后在设置为状态的新数组的末尾添加一个data(这是一个数组)。结果是您得到一个只有一个元素的数组:您之前的所有消息(数组中的数组)。当新消息传入时，addMessage 会进行相同的传播，因此 state.messages 会传播到新数组和 data 中(这又是 - array) 被添加到它的末尾。结果是包含两个元素的数组:在开头添加的第一个数组(数据)和新的数组。通过在 addMessage 函数中执行 ...data ，您可以传播实际的数据数组并将其元素放入状态中，而不是数组本身，因此 [ 。 ..state.messages, ...data ] 的作用类似于两个数组中元素的串联:state.messages 和 data。