I'm trying to print the messages
, and I have created an array smss
that I am pushing the objects into. When I check the type of smss
that show the object I can't print that array.
Inside the componentWillMount()
that return chat id
and other details.
mysms()
function push objects of chat id into this.smss[]
array.
I am calling mysms
named function inside the render().
import React from "react";
import ReactDOM from "react-dom";
import "./chat.css";
import firebase from "../firebaseDB";
import { Link } from "react-router-dom";
class Chat extends React.Component {
constructor(props) {
super(props);
this.state = {
auth: {
auth: false,
tel: null,
r: null
},
chat: {},
sms: [],
smsLoad: false,
status: null
};
}
smss = [];
componentWillMount() {
var u = firebase.auth().currentUser;
if (u) {
this.state.auth.tel = u.phoneNumber;
this.state.auth.auth = true;
this.state.auth.r = window.location.pathname.substring(6, 19);
firebase
.firestore()
.collection("users")
.doc(this.state.auth.tel)
.collection("chat")
.doc(this.state.auth.r)
.get()
.then(d => {
if (d.exists) {
this.setState({ chat: d.data() });
} else {
window.location.href = "/";
}
});
//..
var cid = this.state.chat.id;
} else {
window.location.href = "/";
}
}
mysms = () => {
var cid = this.state.chat.id;
console.log(this.state.chat.id);
firebase
.firestore()
.collection("kayte")
.doc(cid + "")
.collection("chats")
.onSnapshot(doc => {
doc.docs.forEach(id => {
firebase
.firestore()
.collection("kayte")
.doc(cid + "")
.collection("chats")
.doc(id.id)
.onSnapshot(dc => {
this.smss.push(dc.data());
});
});
});
};
realMessage = [];
render() {
this.mysms;
var x = document.getElementById("m-hdr");
var n = document.getElementById("mb");
if (x && n) {
x.style = "display: none";
n.style = "display: none";
}
return (
<div>
<div className="chat-hdr">
<div className="ch">
<a href="/">
<button className="backButton">
<i className="material-icons">keyboard_backspace</i>
</button>
</a>
<span className="cn">
{this.state.chat.name == null
? this.state.auth.r
: this.state.chat.name}
</span>
<span>
<div className="online" />
</span>
</div>
</div>
<div className="smss">
{this.mysms()}
<div>
<p> {console.log(this.smss)}</p>
<div className="smss-rec">Hello</div>
<div class="rec-time">Jun 22 6:04 PM</div>
</div>
<div>
<div className="smss-sent">Hello</div>
<div class="sent-time">22:30</div>
</div>
</div>
<div className="send-sms">
<input type="text" className="sms-text" placeholder="Message..." />
<button className="sms-button">
<i class="material-icons">send</i>
</button>
</div>
</div>
);
}
}
export default Chat;
Add your smss array into state
constructor(props) {
super(props);
this.state = {
.....,
smss: []
};
}
Concat data of mysms into the smss state
mysms = () => {
.....
.onSnapshot(dc => {
this.setState({
smss: this.state.smss.concat([
dc.data()
])
});
});
}
render state in the p tag or in console log
render(
<p> {this.sate.smss}</p>
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.