1 Pregunta: Reaccionar clave de objeto setState con objetivo de evento condicional

pregunta creada en Sun, Mar 24, 2019 12:00 AM

Tengo un problema al configurar claves de objeto en estado. Así que debajo del código hay un formulario con título, cuerpo, ciudad y país. Con el valor dado por el usuario, los puse a estado. Pero como el país y la ciudad deben asignarse en el objeto de "dirección", creé un controlador que verifica si el valor es país /ciudad o no.

Pero resultó que incluso si la condición no se cumple, y ELSE se está ejecutando, aún usa la asignación de objeto en la condición if.

Entonces, ya sea un título o una ciudad, el estado se establece dentro del objeto de dirección

¿Comprobarías dónde estoy haciendo mal?

A continuación están mis formularios y manejadores

class Postit extends Component {
  state = {
    title: "",
    body: "",
    address: {
      country: "",
      city: ""
    }
  };

  handleChange = e => {
    if (e.target.id === "country" || "city") {
      let address = Object.assign({}, this.state.address); 
      address[e.target.id] = e.target.value; 
      this.setState({ address });
      console.log("NewState", this.state);

    } else {
      console.log("Target is not city or country");
     this.setState({
        [e.target.id]: e.target.value
      });
    }
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  render() {
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Send your post</h5>
          {/* Title */}
          <div className="input-field">
            <input type="text" id="title" onChange={this.handleChange} />
            <label htmlFor="title"> Title</label>
          </div>
          {/* Body */}
          <div className="input-field">
            <textarea
              id="body"
              className="materialize-textarea"
              onChange={this.handleChange}
            />
            <label htmlFor="body"> Content</label>
          </div>
          {/* City / Country Select */}

          <div className="input-field">
            <input type="text" id="country" onChange={this.handleChange} />
            <label htmlFor="country"> Write your Country</label>
          </div>

          <div className="input-field">
            <input type="text" id="city" onChange={this.handleChange} />
            <label htmlFor="city"> Write your City</label>
          </div>

          <div className="input-field">
            <button
              className="btn pink lighten-1 center-align"
              style={{ marginTop: "10px", borderRadius: "6px", width: "100%" }}
            >
              Post it
            </button>
          </div>
        </form>
      </div>
    );
  }
}

Exmp, cuando llene el título, El estado nuevo se ve así:

{title: "", body: "", address: {country:"", city:"", title:"test"}}

¡Gracias!

    
0
1 Respuestas                              1                         

No estás comprobando la condición correctamente. if (e.target.id === "country" || "city") siempre será cierto, incluso si e.target.id no es "país", debido a la parte o donde "city" es un valor verdadero. Debe ser if (e.target.id === "country" || e.target.id === "city")

 handleChange = e => {
    if (e.target.id === "country" || e.target.id === "city") {
      let address = Object.assign({}, this.state.address); 
      address[e.target.id] = e.target.value; 
      this.setState({ address });
      console.log("NewState", this.state);

    } else {
      console.log("Target is not city or country");
     this.setState({
        [e.target.id]: e.target.value
      });
    }
  };

Espero que esto ayude!

    
0
2019-03-24 17: 08: 12Z
  1. ¡Gracias, Hemant Parashar! Me centré completamente en la asignación de objetos y echo de menos esto. Muchas gracias
    2019-03-24 17: 19: 49Z
  2. Su bienvenida @mrs_suis :)
    2019-03-24 17: 22: 52Z
fuente colocada aquí