Estoy escribiendo un programa de reacción de electrones. En un intento de usar modales del módulo react-bootstrap aquí. Me encontré con un problema y, después de algunas pruebas, descubrí que era la línea useState () la que estaba causando el problema. Siempre que incluyo useState (), la pantalla se queda completamente en blanco, no solo el componente que estaba usando el estado, sino también toda la ventana de la aplicación de electrones con todos los componentes principales y hermanos. Esto no está vinculado a usarlo para el modal más probable, ya que tampoco funciona con casos simples de useState (). Aquí está mi código para este componente:

    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;

Agradecería cualquier ayuda, soy nuevo en el ámbito de los electrones y reacciono en general.

1
Galina Vitvitskaya 26 jul. 2020 a las 02:16

1 respuesta

La mejor respuesta

Actualización Resolví mi problema, en parte gracias a mu-majid en los comentarios. Aquí está el código actualizado en caso de que alguien esté comenzando y se encuentre con esto.

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;
0
Galina Vitvitskaya 26 jul. 2020 a las 00:14