useState（）反应/电子最终出现在黑屏中

Question

我正在编写一个反应电子程序。尝试使用react-bootstrap模块here中的模式。我偶然发现了一个问题，经过一些测试发现是导致问题的原因是useState（）行。每当我包含useState（）时，屏幕就会完全空白，不仅是使用状态的组件，还包括所有父级和同级组件的电子应用程序的整个窗口。这与将其用于模式无关，因为它也不适用于简单的useState（）情况。这是我对此组件的代码：

    import * as React from 'react';
import { Component, useState } from 'react';

import {Character} from '../../../../Data/Character';
import StatusBar from '../../../Components/StatusBar';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
export interface HealthCardProps {
    Naomi:Character
}
 
export interface HealthCardState {
    
}
 
class HealthCard extends React.Component<HealthCardProps, HealthCardState> {

    GetLabelHealth(){
        let label:string = this.props.Naomi.currentHealth+"/"+this.props.Naomi.maxHealth;
        return label;
    };
    GetLabelHitDice(currentHD:number,HD:number){
        let label:string = currentHD + "d"+HD
        return label
    }
    
    render() { 
        const [show, setShow] = useState(false);

        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);
      

  return (
      
    <>
        <div className="card" style={{textAlign:"center"}}>
        <span style={{fontSize:"20px",color:"#708F93"}}>Hit Points</span>
        <div className="HealthBar">
            <StatusBar bColor="#9DBE9E"
                       fColor="#BAE6BC"
                       value={(this.props.Naomi.currentHealth/this.props.Naomi.maxHealth)*100}
                       label={this.GetLabelHealth()}/>
             {this.props.Naomi.classes.length>=0 && 
                this.props.Naomi.classes.map((c)=>
                <div style={{marginTop:"2px"}}>
                <StatusBar bColor="#c5d2db"
                       fColor="#D8E2E9"
                       value={(c.currentHDie/c.classLevel)*100}
                       label={this.GetLabelHitDice(c.currentHDie,c.hitDie)}/>
                       </div>
                )}
                <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
        </div>
    </div>
    </> );
    }
}
 
export default HealthCard;

我将不胜感激，我是电子的新手，并且通常会做出反应。

Answer 1

更新我解决了我的问题，部分原因在于评论中的mu-majid。这是更新的代码，以防万一有人从头开始偶然发现它。

import * as React from 'react';
import { Component, useState } from 'react';

import {Character} from '../../../../Data/Character';
import StatusBar from '../../../Components/StatusBar';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
export interface HealthCardProps {
    Naomi:Character
}
 
export interface HealthCardState {
    
}
 
class HealthCard extends React.Component<HealthCardProps, HealthCardState> {
    state = {
        isOpen: false
      };

      openModal = () => this.setState({ isOpen: true });
      closeModal = () => this.setState({ isOpen: false });

    GetLabelHealth(){
        let label:string = this.props.Naomi.currentHealth+"/"+this.props.Naomi.maxHealth;
        return label;
    };
    GetLabelHitDice(currentHD:number,HD:number){
        let label:string = currentHD + "d"+HD
        return label
    }
     Example() {
        const [show, setShow] = useState(false);
      
        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);
      
        return (
          <>
            <Button variant="primary" onClick={handleShow}>
              Launch demo modal
            </Button>
      
            
          </>
        );
      }
    
    render() { 
      

  return (
      
    <>
        <div className="card" style={{textAlign:"center"}}>
        <span style={{fontSize:"20px",color:"#708F93"}}>Hit Points</span>
        <div className="HealthBar" onClick={this.openModal}>
            <StatusBar bColor="#9DBE9E"
                       fColor="#BAE6BC"
                       value={(this.props.Naomi.currentHealth/this.props.Naomi.maxHealth)*100}
                       label={this.GetLabelHealth()}/>
             {this.props.Naomi.classes.length>=0 && 
                this.props.Naomi.classes.map((c)=>
                <div style={{marginTop:"2px"}}>
                <StatusBar bColor="#c5d2db"
                       fColor="#D8E2E9"
                       value={(c.currentHDie/c.classLevel)*100}
                       label={this.GetLabelHitDice(c.currentHDie,c.hitDie)}/>
                       </div>
                )}
                
        </div>
    </div>
    <Modal show={this.state.isOpen} onHide={this.closeModal}>
              <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
              <Modal.Footer>
                <Button variant="secondary" onClick={this.closeModal}>
                  Close
                </Button>
                <Button variant="primary" onClick={this.closeModal}>
                  Save Changes
                </Button>
              </Modal.Footer>
            </Modal>
    </> );
    }
}
 
export default HealthCard;