React JS 将 firebase 中的数据传递到我的组件的 props 中

Question

class Mailbox extends Component {
  componentDidMount() {
    const db = firebase.firestore();
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        var user = firebase.auth().currentUser.uid;
        let cityRef = db.collection("Users").doc(user);
        let getDoc = cityRef
          .get()
          .then((doc) => {
            if (!doc.exists) {
              console.log("No such document!");
            } else {
              console.log("Document data:", doc.data());
              let data = doc.data();
              console.log(data.EmailBody);
              console.log(data.EmailSubject);
            }
          })
          .catch((err) => {
            console.log("Error getting document", err);
          });
      }
    });
  }
  render() {
    return (
      <>
        <div id="ZenTitle">
          <h1>ZenMail Mailbox</h1>
        </div>

        <div id="MainArea" className="MainArea">
          <Popup
            trigger={
              <button className="ComposeButton">
                <i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
                Compose
              </button>
            }
            position="center center"
            contentStyle={{
              backgroundColor: "#465775",
              width: "98%",
              height: "80%",
              color: "white",
              paddingTop: "25px",
              borderRadius: "25px",
            }}
            arrowStyle={{
              display: "none",
            }}
          >
            <div>Compose New Email</div>
            <br />
            <NormEdit />
          </Popup>

          <Button className="RefreshButton">
            <i style={{ color: "black" }} class="fas fa-sync"></i>
          </Button>
          <Button className="FavButton">
            <i style={{ color: "black" }} class="fas fa-star"></i>
          </Button>
          <Button className="DeleteButton">
            <i style={{ color: "black" }} class="fas fa-trash-alt"></i>
          </Button>
          <Form>
            <FormGroup>
              <Label></Label>
              <Input className="EmailSearch" placeholder="Search Emails..." />
            </FormGroup>
          </Form>

          <Popup
            trigger={
              <button className="SettingsButton">
                <i style={{ color: "black" }} class="fas fa-cog"></i>
              </button>
            }
            position="right center"
            contentStyle={{
              backgroundColor: "#465775",
              width: "98%",
              height: "80%",
              color: "white",
              paddingTop: "25px",
              borderRadius: "25px",
            }}
            arrowStyle={{
              display: "none",
            }}
          >
            <div>Account Settings</div>
          </Popup>
          <Inbox />
          <div className="IncomingArea">
            <SingleEmail From="Testing" Subject="Testing" Date="testing" />
          </div>

So basically what I am trying to do here is I am trying to pass my

      data.EmailBody
      data.EmailSubject

from my componentDidMount as props down into my

 <SingleEmail From="Testing" Subject="Testing" Date="testing" />

but am struggling to figure out how to do so. The few ways I tried do not seem to be working. I am somewhat new to react and I tried doing it with static props but it does not seem to be possible to do it that way from what I could tell. I would appreciate any suggestions =] Hope everyone is staying safe

Answer 1

use state and set the state using setState when you get the data then pass it on to the component.

Like this:

class Mailbox extends Component {
    state = {
        data: {
            EmailBody: '', 
            EmailSubject: '', 
        }
    };

    componentDidMount() {
        const db = firebase.firestore();
        firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
                var user = firebase.auth().currentUser.uid;
                let cityRef = db.collection("Users").doc(user);
                let getDoc = cityRef
                    .get()
                    .then((doc) => {
                        if (!doc.exists) {
                            console.log("No such document!");
                        } else {
                            console.log("Document data:", doc.data());
                            let data = doc.data();
                            this.setState({
                                data,

                            })
                            console.log(data.EmailBody);
                            console.log(data.EmailSubject);
                        }
                    })
                    .catch((err) => {
                        console.log("Error getting document", err);
                    });
            }
        });
    }
    render() {
        return (
            <>
                <div id="ZenTitle">
                    <h1>ZenMail Mailbox</h1>
                </div>

                <div id="MainArea" className="MainArea">
                    <Popup
                        trigger={
                            <button className="ComposeButton">
                                <i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
                                Compose
                            </button>
                        }
                        position="center center"
                        contentStyle={{
                            backgroundColor: "#465775",
                            width: "98%",
                            height: "80%",
                            color: "white",
                            paddingTop: "25px",
                            borderRadius: "25px",
                        }}
                        arrowStyle={{
                            display: "none",
                        }}
                    >
                        <div>Compose New Email</div>
                        <br />
                        <NormEdit />
                    </Popup>

                    <Button className="RefreshButton">
                        <i style={{ color: "black" }} class="fas fa-sync"></i>
                    </Button>
                    <Button className="FavButton">
                        <i style={{ color: "black" }} class="fas fa-star"></i>
                    </Button>
                    <Button className="DeleteButton">
                        <i style={{ color: "black" }} class="fas fa-trash-alt"></i>
                    </Button>
                    <Form>
                        <FormGroup>
                            <Label></Label>
                            <Input className="EmailSearch" placeholder="Search Emails..." />
                        </FormGroup>
                    </Form>

                    <Popup
                        trigger={
                            <button className="SettingsButton">
                                <i style={{ color: "black" }} class="fas fa-cog"></i>
                            </button>
                        }
                        position="right center"
                        contentStyle={{
                            backgroundColor: "#465775",
                            width: "98%",
                            height: "80%",
                            color: "white",
                            paddingTop: "25px",
                            borderRadius: "25px",
                        }}
                        arrowStyle={{
                            display: "none",
                        }}
                    >
                        <div>Account Settings</div>
                    </Popup>
                    <Inbox />
                    <div className="IncomingArea">
                        <SingleEmail dataSubject={this.state.data.EmailSubject} dataEmail={this.state.data.EmailBody} From="Testing" Subject="Testing" Date="testing" />
                    </div>