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

Question

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

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

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

我看到控制台中发送的消息如下

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

这是我的问题:

1.) 尽管我已将消息设置为 this.props.messages，但该消息并未在渲染方法中显示。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>
    );
  }
}

Answer 1

在OpenedUser.sendMessage中，您有以下代码将input值分别关联到this.state.username/message。

// Reformatted to remove scrollbars
<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})}/>

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

请参阅以下文档

• Forms -> Controlled - 官方 React 文档
• Uncontrolled Components - 官方 React 文档

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

Warning: A component is changing an uncontrolled input of type text to be controlled...

因此，您需要做的就是在 OpenedUser 中声明这两个状态值以及现有状态的其余部分，hidden。

class OpenedUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      // empty/props or other sensible default value
      message: "",
      // empty/props or other sensible default value
      username: ""
    };
  }
  // omitted for brevity...
}

抱歉😅我无法测试上面的代码。