1

Tengo un formulario que con un combobox que al seleccionar una opción la voy a modificar, por lo que creo una copia del objeto seleccionado en otra variable, las modificaciones que hago, las hago a la copia y luego actualizo el elemento en cuestión. Pero, quería hacer esto desde una función, en la que al editar uno de los inputs con nombre o Id "nombreProducto" yo ir a buscar al objeto del json el elemento nombreProducto y asignarle el valor que corresponda y así sucesivamente para los demás elementos, la manera en la que lo intento es:

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: [
        { id: "1", nombreProducto: "Tennis", costoProducto: 0, estado: false },
        { id: "2", nombreProducto: "Camisa", costoProducto: 0, estado: false },
        { id: "3", nombreProducto: "Fajas", costoProducto: 0, estado: false }
      ],
      producto: { id: "", nombreProducto: "", costoProducto: 0, estado: false }
    };

    this.handleDropdown = this.handleDropdown.bind(this);
    this.handleDropDownState = this.handleDropDownState.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleDropdown(event) {
    const objetoSeleccionado = event.target.value;

    if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
      const objeto = this.state[event.target.name].find(
        objeto => objeto.id === objetoSeleccionado
      );
      this.setState(
        {
          producto: objeto
        },
        () => {
          console.log(this.state.producto);
        }
      );
    }
  }

  handleInputChange(event) {
    const nombreElemento = event.target.name;

    if (!(nombreElemento === null || nombreElemento === undefined)) {
      this.setState(
        { [this.state.producto[nombreElemento]]: event.target.value },
        () => {
          console.log(this.state.producto);
        }
      );
    }
  }

  handleDropDownState(event) {
    if (!(event.target.name === null || event.target.name === undefined)) {
      let producto = this.state.producto;
      producto.estado = event.target.checked;
      this.setState({ [event.target.name]: producto });

      this.setState({
        [this.state.productos.map(
          productoFinal => productoFinal.id === producto.id
        )]: [producto]
      });
      console.log(this.state);
    }
  }

  render() {
    return (
      <div>
        <select name="productos" onChange={e => this.handleDropdown(e)}>
          {this.state.productos.map((p, i) => {
            return (
              <option key={i} value={p.id}>
                {p.nombreProducto}
              </option>
            );
          })}
        </select>
        <br />
        <label htmlFor="nombreProducto">
          Nombre del Producto:{" "}
          <input
            id="nombreProducto"
            name="nombreProducto"
            onChange={this.handleInputChange}
          />
        </label>
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Pero esto me no me actualiza el state, es más haciendo debug, veo que cuando hago esto: [this.state.producto[nombreElemento]] retorna undefined, asumo que lo estoy haciendo mal.

Gracias de antemano.

2 respuestas 2

1

Más que guardar el producto completo, lo que en realidad necesitas es guardar el id de tu producto, que te dará una referencia para saber el producto exacto a modificar más tarde.
Hice algunas modificaciones a tu snippet para cambiar el nombre del producto (que al menos eso entendí que es lo que querías hacer) que eventualmente podrías extenderlo a los demás atributos del producto. Atento a los comentarios más adelante, que es donde principalmente hice los cambios de tu código.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: [
        { id: '1', nombreProducto: 'Tennis', costoProducto: 0, estado: false },
        { id: '2', nombreProducto: 'Camisa', costoProducto: 0, estado: false },
        { id: '3', nombreProducto: 'Fajas', costoProducto: 0, estado: false }
      ],
      // Le puse 1 por defecto, pero ahí verás tu si quieres que sea null o algo
      // más
      productoId: "1"
    };

    this.handleDropdown = this.handleDropdown.bind(this);
    this.handleDropDownState = this.handleDropDownState.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleDropdown(event) {
    const objetoSeleccionado = event.target.value;

    if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
      const objeto = this.state.productos.find(
        (objeto) => objeto.id === objetoSeleccionado
      );
      // Seteo de id al cambiar el select
      this.setState({ productoId: objeto.id });
    }
  }

  handleInputChange(event) {
    const { name, value } = event.target;
    const { productoId, productos } = this.state;

    if (!(name === null || name === undefined) && productoId !== null) {
      // Acá realiza un spreading del arreglo de productos para copiarlo, donde
      // se modificará el producto basado en su id y luego se cambiará el state
      // actual por el nuevo
      let productoCopy = [...productos];
      const idx = productoCopy.findIndex((p) => p.id == productoId);
      productoCopy[idx] = { ...productoCopy[idx], [name]: value };
      this.setState({ productos: productoCopy });
    }
  }

  handleDropDownState(event) {
    if (!(event.target.name === null || event.target.name === undefined)) {
      let producto = this.state.producto;
      producto.estado = event.target.checked;
      this.setState({ [event.target.name]: producto });

      this.setState({
        [this.state.productos.map(
          (productoFinal) => productoFinal.id === producto.id
        )]: [producto]
      });
    }
  }

  render() {
    return (
      <div>
        <select name="productos" onChange={(e) => this.handleDropdown(e)}>
          {this.state.productos.map((p, i) => {
            return (
              <option key={i} value={p.id}>
                {p.nombreProducto}
              </option>
            );
          })}
        </select>
        <br />
        <label htmlFor="nombreProducto">
          Nombre del Producto:{' '}
          <input
            id="nombreProducto"
            name="nombreProducto"
            onChange={this.handleInputChange}
          />
        </label>
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

1

La mejor forma de actualizar el estado es hacerlo de forma inmutable y en lo que te estabas equivocando era que no ponías en el setState la variable "producto" que es la variable de estado que vas a modificar (aunque tu solo quieras modificar uno de los elementos del objecto producto, en el setState hay que indicar la variable a modificar aunque tu solo quieras modificar un elemento de un objeto o de una lista).

  handleInputChange(event) {
    const nombreElemento = event.target.name;

    if (!(nombreElemento === null || nombreElemento === undefined)) {
      this.setState({
        producto: {
          ...this.state.producto,
          [this.state.producto[nombreElemento]]: event.target.value
        }
      })
    }
  }

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.