reactjs - 使用 react js 从 fireabase 数据库中检索布尔值并显示该值

Question

这是推送到运行良好的数据库代码

 pushtoDB = () => {
    var ref = fire.database().ref("data");
    var newRef = ref.push();
    const rookie = this.props.userLevel1;
    const student = this.props.userLevel2;
    const intermediate = this.props.userLevel3 ? "intermediate" : null;
    const expert = this.props.userLevel4 ? "expert" : null;
    const master = this.props.userLevel5 ? "master" : null;

    newRef.set({
      ID: fire.auth().currentUser.uid,
      UserEmail: fire.auth().currentUser.email,
      Question: this.state.questions, //Send data to DB to track for analysis
      UserAnswer: this.state.userAns,
      Score: this.state.scores,
      UserLevel: rookie
      //  UserLevel: student
      // UserLevel: intermediate,
      // UserLevel: expert,
      //UserLevel: master
    });

    console.log("Sent to Database");
  };

在数据库中，我可以看到 Userlevel 的值是“true”，这就是我想要的

我想在使用此代码时将真实值显示为“新手”。它看起来不错，但显示“无数据”

 return (
      <div id="container" style={{ fontFamily: "sans-serif" }}>
        <Card border="primary" style={{ width: "40rem", marginLeft: 50 }}>
          <Card.Header style={{ textAlign: "center" }}> Profile</Card.Header>
          <Card.Body>
            <Card.Title style={{ marginLeft: 230 }}>
              <img id="profilepic" src={ProfilePic} />
            </Card.Title>
            <Card.Text style={{ marginLeft: 70 }}>
              <br></br>
              <ul>
                <MdEmail /> Email :
                {this.props.email ? this.props.email : "No data for Email"}
                <br></br>
                Score :
                {this.props.score ? this.props.score : "No data for Score"}
                <br></br>
                Level : {this.props.level ? "rookie" : "no data"}
              </ul>
            </Card.Text>
          </Card.Body>
        </Card>
      </div>

任何帮助都会非常感谢

标签： reactjsfirebase-realtime-database

Answer 1

rookie只是方法内的局部变量，在您的实现pushtoDB中不可用。render

您可以检查userLevel1渲染代码中的属性：

return (
      <div id="container" style={{ fontFamily: "sans-serif" }}>
        <Card border="primary" style={{ width: "40rem", marginLeft: 50 }}>
          <Card.Header style={{ textAlign: "center" }}> Profile</Card.Header>
          <Card.Body>
            <Card.Title style={{ marginLeft: 230 }}>
              <img id="profilepic" src={ProfilePic} />
            </Card.Title>
            <Card.Text style={{ marginLeft: 70 }}>
              <br></br>
              <ul>
                <MdEmail /> Email :
                {this.props.email ? this.props.email : "No data for Email"}
                <br></br>
                Score :
                {this.props.score ? this.props.score : "No data for Score"}
                <br></br>
                Level : {this.props.userLevel1 ? "rookie" : "no data"}
              </ul>
            </Card.Text>
          </Card.Body>
        </Card>
      </div>

或者，您可以rookie在状态中设置值，然后在渲染代码中使用它：

pushtoDB = () => {
    var ref = fire.database().ref("data");
    var newRef = ref.push();
    const rookie = this.props.userLevel1;
    const student = this.props.userLevel2;
    const intermediate = this.props.userLevel3 ? "intermediate" : null;
    const expert = this.props.userLevel4 ? "expert" : null;
    const master = this.props.userLevel5 ? "master" : null;

    this.setState({ level: rookie });

    ...
}
...
                Level : {this.state.level ? "rookie" : "no data"}