0

Tengo un error que no puedo solucionar ya que me sale este error

introducir la descripción de la imagen aquí

lo que ocurre es cuando cambio de componente mediante un switch en donde dependiendo true o false se muestra, en este caso reemplazo toda la vista y es donde sale este error

Componente

import React, { Component } from 'react';
import Fecha from "./Fecha";
import { Scrollbars } from 'react-custom-scrollbars';
import { Totales } from "./Metodos";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class Orden extends Component {
    constructor() {
        super();
        this.state={isMounted:false}
    }
    componentDidMount() {
        this.setState({isMounted:!this.state.isMounted});
    }
    componentWillUnmount(){
        this.setState({isMounted:!this.state.isMounted});
    }
    procesa(){        
        this.props.procesa();
    }
    remove(i){
        this.props.remove(i);
    }
    cantidad(e,i){
        var a = (i.target.value).replace(/[^0-9]/g, '');
        if (a!="" && a > 0){
            this.props.cantidad(e, i.target.value);
        }else{
            alertify.error("Ingrese un numero mayor a '0'");
        }        
    }
    cancelar(){
        this.props.cancelar();
        alertify.error("Cancelado");
    }
    render() {
        const data = this.props.orden.map((item, i) =>
            <tr key={i} className="animated">
                <td className="align-middle">
                    <div id="detalle">
                        <span className="descripcion">{item.descripcion}</span><br />
                        {item.color[item.co].Descripcion} | {item.talla[item.ta].Descripcion}
                    </div>
                </td>
                <td className="text-right align-middle">{item.moneda.symbol}{item.PVP}</td>
                <td className="align-middle">
                    <div id="cantidad">
                        <input value={item.cantidad} onChange={this.cantidad.bind(this, i)} type="number" min="1"/>
                        <div id="div">
                            <div id="inc-button" className="spinner-button"></div>
                            <div id="dec-button" className="spinner-button"></div>
                        </div>
                    </div>
                </td>
                <td className="text-right align-middle">{item.moneda.symbol}{item.total}</td>
                <td className="align-middle"><span onClick={this.remove.bind(this,i)} style={{ fontSize:"1.3rem" }}><i className="fas fa-times"></i></span></td>
            </tr>
        );
        return (
            <div id="orden">
                <div className="ocab">
                    Detalle de Compra
                    <span onClick={this.cancelar.bind(this)}>CANCELAR <i className="fal fa-trash-alt fa-2x"></i></span>
                    {this.state.isMounted ? <Fecha />:''}
                </div>
                <Scrollbars id="otable" className="animated bounceIn">
                    {this.state.isMounted ? <table className="table">
                        <thead>
                            <tr>
                                <th><span className="thproducto">PRODUCTO</span></th>
                                <th className="text-right align-middle">PRECIO</th>
                                <th>CANTIDAD</th>
                                <th className="text-right align-middle">SUBTOTAL</th>
                                <th></th>
                            </tr>
                        </thead>
                            <tbody>
                                <ReactCSSTransitionGroup
                                    component={React.Fragment}
                                    transitionName="example"
                                    transitionEnterTimeout={700}
                                    transitionLeaveTimeout={700}
                                >
                                    {data}  
                                </ReactCSSTransitionGroup>                          
                            </tbody>
                    </table>:''}
                </Scrollbars>
                <div className="footer col-md-4">
                    {this.state.isMounted ? <Totales 
                        total={this.props.total}
                        subtotal={this.props.subtotal}
                        descuento={this.props.descuento}
                        igv={this.props.igv}
                    />: ''}
                    <div className="text-center align-middle">
                        <button onClick={this.procesa.bind(this)} className="btn btn-secondary">PROCESAR ORDEN</button>
                    </div>
                </div>
            </div>
        )
    }
}

He buscado otras formas de hacerlo pero no funcionan

_isMounted = false

pero con esto me sale este error

introducir la descripción de la imagen aquí

1 respuesta 1

0

el error te lo está proporcionando la siguiente línea seguramente:

componentWillUnmount(){
    this.setState({isMounted:!this.state.isMounted});
}

Lo que ocurre es que cuando reemplazas la vista a través del Switch, el componente se "desmonta". Fíjate que estás lanzando un setState sobre el propio componente que se va a desmontar. Por lo que React no es capaz de realizarlo ya que el componente ya no existe.

El uso común de componentWillUnmount es para eliminar eventos o referencias del DOM que si se volviera a montar el componente se duplicarían o para cortar request en vuelo de peticiones HTTP, por ejemplo.

Espero que se entienda y te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.