Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estados compuestos con React.Component

8/19
Recursos

Aportes 7

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El final de esta clase me dio gran alivio, justo iba a preguntar como podiamos implementar este estado compuesto pero con los hooks.

.
Ya que esta forma como lo manejan los class components me para mas interesante cuando tenemos muchos estados en un solo componente. 😉

Yo lo hice de esta forma que en mi opinion me parece mas simplificado agregar una condicion

    componentDidUpdate() {
        console.log("Actualizacion");

        if (this.state.loading) {
            setTimeout(() => {
                console.log("Haciendo la validacion");

                this.setState({ loading: false, error: SECURITY_CODE !== this.state.value });

                console.log("Terminando la validacion");
            }, 3000);
        }
    }

si guardamos SECURITY_CODE !== this.state.value en una variable va a retornar un boolean, asi que devolvera true o false dependiendo si el codigo es diferente o el mismo.

Y de acuerdo a las soluciones anteriores si me gusto mas el de agregar una condicion para mostrar el error solo si loading es false.

Estados complejos o compuestos:
Es la modficacion de 2 o más estados utilizando la siguiente sintaxis:

this.setState({ loading: false, error: false});

Intenté replicar el ejercicio al igual que lo había hecho con useStates, y nop! Recibo un error, así que la mejor forma es la explicada aquí, así parezca menos práctica y redundante 😅
.
Así fue como lo intenté incialmente 👇

componentDidUpdate() {
        if (!!this.state.loading) {
            this.setState({ error: false });
            setTimeout(() => {
                (this.state.value !== SECURITY_CODE) && this.setState({ error: true });
                this.setState({ loading: false });
            }, 3000)
        }
    }

Y el error que recibía es el siguiente 👇

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

.
En el primer setState, del error a false.

Mi practica:

import React from "react";
import { Loading} from "./Loading";

const SECURITY_CODE = "andrea";

class ClassState extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: "",
            error: false,
            loading: false,
        }
    }
    componentDidUpdate(prevProps, prevState, snapshot) {

        if (!!this.state.loading) {
            setTimeout(() => {
                if(this.state.value === SECURITY_CODE) {
                    this.setState({
                        loading: false,
                        error: false,
                    })
                } else {
                    this.setState({
                        loading: false,
                        error: true,
                    })
                }
            }, 3000);
        }

    }

    render() {
        return (
            <div>
                <h2>Eliminar {this.props.name}</h2>
                <p>Por favor, escribe el código de seguridad</p>
                {(!this.state.loading && this.state.error) && (
                    <p> El Código incorrecto</p>
                )}
                {this.state.loading && (
                    <Loading />
                )}
                <input
                    value={this.state.value}
                    onChange={(event) => {
                        this.setState({
                            value: event.target.value
                        });
                    }}
                    placeholder="Código de Seguridad"
                />
                <button
                    //onClick={() => this.setState(prevState => ({ error: !prevState.error}))}
                    onClick={() => this.setState({ loading: !this.state.loading})}
                >Comprobar
                </button>
            </div>
        );
    }
}

export {ClassState};

Así es como implementé la actualización de estados con una ternaria :

componentDidUpdate(){
		console.log("Empezando el efecto");
		if (!!this.state.loading){
			setTimeout(()=>{
				console.log("Haciendo la validación");
				this.setState({
					error: this.state.value !== SECURITY_CODE ? true : false,
					loading: false
					})
				console.log("Terminando la validación");
			}, 3000);
		}
		console.log("Terminando el efecto");
	}
import React from "react";
import { Loading } from "./Loading";
const SECURITY_CODE = "paradigma";

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      error: false,
      loading: false,
    };
  }

  UNSAFE_componentWillMount() {
    console.log("UNSAFE_componentWillMount");
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentDidUpdate() {
    console.log("Update");

    if(!!this.state.loading) {
      setTimeout(() => {
        console.log("Doing the validation");

        if (SECURITY_CODE === this.state.value) {
          this.setState( { error:false, loading: false } );
        } else {
          this.setState( { error: true, loading:false } );
        }

        console.log("Finishing the validation");
      }, 1000);
    }
  }

  render() {
    return (
      <div>
        <h2>Delete {this.props.name}</h2>

        <p>Please enter the security code</p>

        {(this.state.error && !this.state.loading) && (
          <p>Error: Security code is incorrect</p>
        )}

        {this.state.loading && (
          <Loading />
        )}

        <input
          placeholder="Security Code"
          value={this.state.value}
          onChange={(event) => this.setState({ value: event.target.value })}
        />

        <button
          onClick={() => this.setState({ loading: true })}
        >Check</button>
      </div>
    );
  }
}

export {ClassState};