无法使用reactjs显示发布的数据

通过在弹出框中显示用户信息，下面的代码可以正常工作。 现在我想将消息发送给每个用户到nodejs服务器。我可以在nodejs服务器端看到该消息 控制台

在reactjs控制台中，按照下面的代码

const addMessage = data => {
    console.log(data);
    this.setState({messages: [...this.state.messages, data]});
};

我看到控制台中根据发送的消息

{author: "Nancy ", message: "first message"}

这是我的问题：

1.）尽管我已将该消息设置为.props.messages，但该消息不会显示在render方法中。。 2.）当我在输入表单上键入时，我在控制台中看到错误警告，如下所示

警告：组件正在更改要控制的文本类型的非受控输入。 输入元件不应从非受控切换到受控（反之亦然）。 在组件的使用寿命内，决定使用受控或非受控输入元件。 输入中（由OpenedUser创建）

下面是我如何从nodejs服务器发布和检索它

componentDidMount(){
    this.socket = io('http://localhost:8080');
    this.socket.on('response message', function(data){
        addMessage(data);
    });
    const addMessage = data => {
        console.log(data);
        this.setState({messages: [...this.state.messages, data]});
    };
} // close component didmount

sendMessage = ev => {
    ev.preventDefault();
    this.socket.emit('chatMessage', {
        author: this.state.username,
        message: this.state.message
    })
    this.setState({message: ''});
}

这是目前为止完整的工作代码

//npm install --save socket.io
//npm install --save socket.io-client


import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import { Link } from 'react-router-dom';
import axios from 'axios';
import io from "socket.io-client";


class User extends React.Component {
  open = () => this.props.open(this.props.data.id, this.props.data.name);
  render() {
    return (
      <React.Fragment>
        <div key={this.props.data.id}>
          <button
            onClick={() => this.open(this.props.data.id, this.props.data.name)}
          >
            {this.props.data.name}
          </button>
        </div>
      </React.Fragment>
    );
  }
}

class OpenedUser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: false
        };
    }
    componentDidMount(){
        this.socket = io('http://localhost:8080');
        this.socket.on('response message', function(data){
            addMessage(data);
        });
        const addMessage = data => {
            console.log(data);
            this.setState({messages: [...this.state.messages, data]});
        };
    } // close component didmount


    sendMessage = ev => {
        ev.preventDefault();
        this.socket.emit('chatMessage', {
            author: this.state.username,
            message: this.state.message
         })
         this.setState({message: ''});
    }

    toggleHidden = () => this.setState(prevState => ({ hidden: !prevState.hidden }));

    close = () => this.props.close(this.props.data.id);

    render() {
        return (
            <div key={this.props.data.id} style={{ display: "inline-block" }}>
                <div className="msg_head">
                    <button onClick={this.close}>close</button>
                    <div>user {this.props.data.id}</div>
                    <div>name {this.props.data.name}</div>
                    {this.state.hidden ? null : (
                            <div className="msg_wrap">
                            <div className="msg_body">Message will appear here</div>
                            <b> {" "} Display Chat Message below...{" "}</b>



<div>
                                    {this.props.messages.map(message => {
                                        return (
                                            <div>{message.author}: {message.message}</div>
                                        )
                                    })}
                                </div>

 <div>
                                <input type="text" placeholder="Username" value={this.state.username} onChange={ev => this.setState({username: ev.target.value})}/>
                                <br/>
                                <input type="text" placeholder="Message" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                                <br/>
                                <button onClick={this.sendMessage} className="btn btn-primary">Send message</button>
                            </div>



            </div>
          )}
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();

    this.state = {
loading_image: false,
      shown: true,
      activeIds: [],
 username: '',
 message: '',
 messages: [],



      data: [
        { id: 1, name: "user 1" },
        { id: 2, name: "user 2" },
        { id: 3, name: "user 3" },
        { id: 4, name: "user 4" },
        { id: 5, name: "user 5" }
      ]
    };
  }

  toggle() {
    this.setState({
      shown: !this.state.shown
    });
  }


  open = (id, name) => {
    alert(id);
    alert(name);

    //start axios api call

    const user_data = {
      uid: "id",
      uname: "name"
    };



    this.setState(prevState => ({
      activeIds: prevState.activeIds.find(user => user === id)
        ? prevState.activeIds
        : [...prevState.activeIds, id]
    }));
  };

  close = id => {
    this.setState(prevState => ({
      activeIds: prevState.activeIds.filter(user => user !== id)
    }));
  };

  renderUser = id => {
    const user = this.state.data.find(user => user.id === id);
    if (!user) {
      return null;
    }
    return (
      <OpenedUser
        chatData={this.state.chatData}   messages={this.state.messages}
        key={user.id}
        data={user}
        close={this.close}
      />
    );
  };

  renderActiveUser = () => {
    return (
      <div style={{ position: "fixed", bottom: 0, right: 0 }}>
        {this.state.activeIds.map(id => this.renderUser(id))}
      </div>
    );
  };

  render() {


    return (
      <div>
        {this.state.data.map(person => (

          <User key={person.id} data={person} open={this.open} />

        ))}
        {this.state.activeIds.length !== 0 && this.renderActiveUser()}
      </div>
    );
  }
}

//npm安装--保存socket.io
//npm安装--保存socket.io-client
从“React”导入React，{Component，Fragment}；
从“react dom”导入{render}；
从'react router dom'导入{Link}；
从“axios”导入axios；
从“socket.io客户端”导入io；
类用户扩展了React.Component{
open=（）=>this.props.open（this.props.data.id，this.props.data.name）；
render（）{
返回(
this.open（this.props.data.id，this.props.data.name）}
>
{this.props.data.name}
);
}
}
类OpenedUser扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
隐藏：假
};
}
componentDidMount（）{
this.socket=io（'http://localhost:8080');
this.socket.on（'response message'，函数（数据）{
添加消息（数据）；
});
const addMessage=数据=>{
控制台日志（数据）；
this.setState（{messages:[…this.state.messages，data]}）；
};
}//关闭组件安装
sendMessage=ev=>{
ev.preventDefault（）；
this.socket.emit（'chatMessage'{
作者：this.state.username，
消息：this.state.message
})
this.setState（{消息：'}）；
}
toggleHidden=（）=>this.setState（prevState=>（{hidden:！prevState.hidden}））；
close=（）=>this.props.close（this.props.data.id）；
render（）{
返回(
关闭
用户{this.props.data.id}
name{this.props.data.name}
{this.state.hidden？空：(
消息将出现在此处
{“”}在下面显示聊天信息…{“”}
{this.props.messages.map（message=>{
返回(
{message.author}:{message.message}
)
})}
this.setState（{username:ev.target.value}）}/>


this.setState（{message:ev.target.value}）}/>


发送消息
)}
);
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
正在加载图像：false，
显示：是的，
ActiveID:[]，
用户名：“”，
消息：“”，
信息：[]，
数据：[
{id:1，名称：“用户1”}，
{id:2，名称：“用户2”}，
{id:3，名称：“user 3”}，
{id:4，名称：“user 4”}，
{id:5，名称：“user 5”}
]
};
}
切换（）{
这是我的国家({
已显示：！this.state.show
});
}
打开=（id，名称）=>{
警报（id）；
警报（名称）；
//启动axios api调用
常量用户_数据={
uid:“id”，
uname：“姓名”
};
this.setState（prevState=>({
ActiveID:prevState.ActiveID.find（user=>user==id）
？prevState.activeId
：[…prevState.ActiveID，id]
}));
};
close=id=>{
this.setState（prevState=>({
ActiveID:prevState.ActiveID.filter（用户=>user！==id）
}));
};
renderUser=id=>{
const user=this.state.data.find（user=>user.id==id）；
如果（！用户）{
返回null；
}
返回(
);
};
renderActiveUser=（）=>{
返回(
{this.state.activeIds.map（id=>this.renderUser（id））}
);
};
render（）{
返回(
{this.state.data.map（person=>(
))}
{this.state.activeIds.length！==0&&this.renderActiveUser（）}
);
}
}

在

OpenedUser.sendMessage

中，您有以下代码将

输入值分别关联到
此.state.username/message

//重新格式化以删除滚动条
this.setState（{username:ev.target.value}）}/>


this.setState（{message:ev.target.value}）}/>

最初，您的
this.state.username/message
是未定义的，因此React认为这两个组件是
不受控制的

有关详细信息，请参阅以下文档


-官方文件
-官方文件

一旦您在
onChange
中设置了这些状态的值，React now认为您正在更改
受控的
组件值，如错误消息所示

警告：组件正在更改要控制的文本类型的非受控输入

因此，您需要做的是在
OpenedUser
中用exi的其余部分声明这两个状态值