javascript - 我想在数组中打印数据
问题描述
我正在尝试打印messages
,并且我创建了一个数组smss
,我正在将对象推入其中。当我检查smss
显示对象的类型时,我无法打印该数组。
里面componentWillMount()
那个返回chat id
和其他细节。
mysms()
函数将聊天 id 的对象推送到this.smss[]
数组中。
我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;
解决方案
将您的 smss 数组添加到状态
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>
)
推荐阅读
- asp.net - 应用程序从 .net core 2.1 迁移到 3.0
- java - 写入标准输出很慢,为什么仍然建议登录标准输出?
- flutter - Navigator.push 将在 Navigator.push 之后关注目标页面上的文本字段时再次调用
- sql - 如何在没有密码的情况下从 Powershell 连接到 sql server?
- ionic-framework - 将图像文件发布到在 Ionic 3 中不起作用的事件
- aws-lambda - 调用 ApiGatewayManagementApi.postToConnection() 给我 500 内部服务器错误?
- swift - 映射结构数组
- php - 多种方法尝试不跳过其他php
- java - 由于 Spring Boot 应用程序中的 GC,响应时间高
- javascript - p5js 中的 keyIsDown() 问题