我想在数组内打印数据

Question

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;

Answer 1

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