Состояние родителя не передается ребенку должным образом

Question

Могу я задать очень простой вопрос, почему состояние приложения не передается реквизиту Child1?Из следующего кода компонент Child1 должен показывать isLoggedIn из App в теге p, однако он не показывает его.Не могли бы вы дать какой-нибудь совет для этого?

App.js

import React, { Component } from "react";
import "./App.css";
import Child1 from "./Child1";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: false
    };
  }

  componentDidMount() {
    this.loginId = setInterval(() => {
      var loggedIn = Math.random() >= 0.5 ? true : false;
      this.setState({ isLoggedIn: loggedIn });
      console.log(this.state.isLoggedIn, "isLoggedIn");
    }, 3000);
  }

  render() {
    return (
      <div className="App">
        <Child1 isLoggedIn={this.state.isLoggedIn} />
      </div>
    );
  }
}

export default App;

Child1.js

import React, { Component } from "react";

class Child1 extends Component {
  render() {
    return (
      <div>
        <h1> Child 1 </h1>
        <p>Currently LoggedIn is {this.props.isLoggedIn}</p>
      </div>
    );
  }
}

export default Child1;

Моя информация о версии реакции следующая.

"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"

Answer 1

bool не может быть представлен.Вы можете просто сделать что-то вроде этого:

    <p>Currently LoggedIn is {this.props.isLoggedIn.toString()}</p>