![](/img/trans.png)
[英]i want to be able to store and display data from an array and inside localstorage?
[英]I want to print data inside an array
我正在嘗試打印messages
,並且創建了一個數組smss
,將對象推入其中。 當我檢查顯示對象的smss
類型時,無法打印該數組。
在componentWillMount()
內部,該componentWillMount()
返回chat id
和其他詳細信息。
mysms()
函數將聊天ID的對象推送到this.smss[]
數組中。
我在render()中調用名為函數的mysms
。
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;
將您的短信數組添加到狀態
constructor(props) {
super(props);
this.state = {
.....,
smss: []
};
}
將mysms的concat數據轉換為smss狀態
mysms = () => {
.....
.onSnapshot(dc => {
this.setState({
smss: this.state.smss.concat([
dc.data()
])
});
});
}
在p標簽或控制台日志中呈現狀態
render(
<p> {this.sate.smss}</p>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.