получение логических значений из базы данных fireabase с реагированием js и отображение значения

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", это то, что я хочу

Я хочу отображать истинное значение как «rook ie» при использовании этого кода .. он выглядит правильно, но его отображение «без данных»

 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>

любая помощь будет отличной, спасибо

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"}