Question

我正在尝试打印messages，并且创建了一个数组smss，将对象推入其中。当我检查显示对象的smss的类型时，无法打印该数组。

返回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;

Answer 1

将您的短信数组添加到状态

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>
)

我想在数组内打印数据

1 个答案: