Tengo un error que no puedo solucionar ya que me sale este error
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