Tengo una matriz de datos existente en un archivo separado que estoy agregando con la entrada del usuario. La entrada del usuario que estoy tomando son 3 películas favoritas. Puedo recibir y enviar el resto de datos a un archivo existente. No estoy seguro de si la matriz de estado me está confundiendo, pero no puedo agregar 3 cadenas a la matriz.

Mi estado es el siguiente:

    this.state = {
      isActive: false,
      id: 25,
      name: { first: "", last: "" },
      city: "",
      country: "",
      employer: "",
      title: "",
      favoriteMovies: ['', '', '']
    };

Estoy configurando el estado para la entrada del usuario de la siguiente manera:

 handleFavoriteMoviesChange = (e) => {
    this.setState({ favoriteMovies: [...this.state.favoriteMovies, e.target.value]})
  };

Estos son mis 3 campos de entrada:

            <input
              placeholder="favorite movies"
              value={this.state.favoriteMovies[0]}
              onChange={this.handleFavoriteMoviesChange}
            />
            <input
              placeholder="favorite movies"
              value={this.state.favoriteMovies[1]}
              onChange={this.handleFavoriteMoviesChange}
            />
            <input
              placeholder="favorite movies"
              value={this.state.favoriteMovies[2]}
              onChange={this.handleFavoriteMoviesChange}
            />
0
turntlane 5 oct. 2021 a las 06:56

2 respuestas

La mejor respuesta

Si desea establecer el valor de favoriteMovies en su índice particular, puede setState como se muestra a continuación: CODESANDBOX DEMO

  handleFavoriteMoviesChange = (e, index) => {
    this.setState({
      favoriteMovies: this.state.favoriteMovies.map((movie, i) => {
        if (i === index) return e.target.value;
        return movie;
      })
    });
  };

Y llama a handleFavoriteMoviesChange como:

<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[0]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 0)}
/>
<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[1]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 1)}
/>
<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[2]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 2)}
/>
0
decpk 5 oct. 2021 a las 04:10

Está configurando el estado para que solo incluya favoriteMovies. La forma correcta sería:

handleFavoriteMoviesChange = (e) => {
  this.setState({...this.state, favoriteMovies: [...this.state.favoriteMovies, e.target.value]})
};
0
ABDULLOKH MUKHAMMADJONOB 5 oct. 2021 a las 04:04