Question

我正在构建一个聊天应用程序，其中设置了除频道之外的几乎所有内容。问题是我还设置了通道的firebase端，我在其中写入输入并在firebase中进行射击。但是渲染时我无法在页面上显示它们。在我的json树中，我有消息分支，并且在其中每个通道ID都看到了我写的消息。每个频道ID都位于messages元素的不同分支中。我认为我无法显示消息的原因是因为它们是messages元素的子元素。我找不到一种显示组件子项的方法。这是我的代码。这是我应用程序的最后一部分，我被困在这里。任何帮助将不胜感激。

class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
  userName: null,
  message: '',
  messages: [],
};
this.messageRef = 
firebase.database().ref('messages');
}


componentWillReceiveProps(nextProps) {
  this.setState({userName: nextProps.currentUser});
}

handleChange(event) {
this.setState({message: event.target.value});
}



handleSend = () => {
if (this.state.message) {
  var newItem = {
    userName: this.state.userName && 
  this.props.currentUser.displayName,
    message: this.state.message,
    id:this.props.currentUser.uid,

  timeDetail:firebase.database.ServerValue.TIMESTAMP,
    channel_id:this.props.selectedChannel.id
  }

 this.messageRef.child(this.props.selectedChannel.id) .push(newItem)
  .then(() => {
    this.setState({message:''})
  })
  .catch(err => {
    console.log(err)
  })
}
  }


handleKeyPress(event) {
if (event.key !== 'Enter') return;
this.handleSend();
}

listenMessages() {
let messages=[]
this.messageRef.child()
  .on('value',snapshot => {
    snapshot.forEach(snap => {
    })
    this.setState({messages:Object.values(snapshot.val())})
  })
}

displayMessages = messages =>
messages.map((message,i) => (
<Message
  key={i}
  message={message}
  userName={this.props.currentUser}
/>
));

render() {
const {messages} =this.state
return (
  <div className="form">
    <div className="chatroom" style={{height:300, width:'90%'}}>
      {this.displayMessages(messages)}
    </div>
      <input
        className="send-message"
        type="text"
        placeholder="Type message"
        value={this.state.message}
        onChange={this.handleChange.bind(this)}
        onKeyPress={this.handleKeyPress.bind(this)}
      />
    <button onClick={this.handleSend}>Send</button>
  </div>
)};
}

function mapStateToProps(state){
  return{
  currentUser:state.user.currentUser,
  selectedChannel:state.channel.selectedChannel
  }
}


export default connect(mapStateToProps)(ChatRoom);

如何在react中显示Firebase的子元素

0 个答案: