useState() react/electron 以黑屏结束

Question

我正在编写一个反应电子程序。尝试使用来自 react-bootstrap 模块 here 的模式。我偶然发现了一个问题，经过一些测试发现是 useState() 行导致了这个问题。每当我包含 useState() 时，屏幕就会完全空白，不仅是使用状态的组件，还有电子应用程序的整个 window 以及所有父组件和同级组件。这与将它用于模态最有可能无关，因为它也不适用于简单的 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;

如果有任何帮助，我将不胜感激，我是 Electron 的新手并且反应一般。

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;

useState() react/electron 以黑屏结束

useState() react/electron ends up in blank screen

reactjs

electron

electron-forge