1
votes

Comment définir l'état d'un tableau d'objets dans React

Je travaille sur une application de réaction de carte flash. J'ai initialisé mon état en tant que tableau d'objets (l'utilisateur ne peut ajouter que 10 termes / définitions à la fois donc limité à 10) comme suit:

onChangeTerm = (event) => {

        for(var i = 0; i < this.props.numberOfTerms.length; i++) {
            this.setState({ allTerms[i].term: event.target.value});
        }
    }

L'entrée provient d'une dynamique formulaire qui fournit un nombre X de champs de saisie en fonction du nombre de cartes que l'utilisateur souhaite ajouter. Mon problème actuel est ma fonction onChange. Lorsqu'un utilisateur tape quelque chose dans un champ de saisie (actuellement concentré sur le terme et la figure, je peux utiliser une solution similaire pour la définition), le changement appelle ma fonction onChangeTerm où j'ai une boucle for:

state = { 
        allTerms: [
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        },
        {
            term: '',
            def: ''
        }
    ]
}

javascript reactjs object arrays setstate

0 commentaires

4 Réponses :

2
votes

Voilà:

Vous pouvez passer l'événement et l'indexer à la fois à la fonction:

La référence est tirée de votre question précédente :

onChangeTerm = (event , index) => {
    this.setState({
        allTerms : [
        ...this.state.allTerms.splice(0,index) ,
        {
            ...this.state.allTerms[index],
            term: event.target.value
        },
        ...this.state.allTerms.splice(index+1) ,
    });
}

Mettez à jour quelque chose comme ceci:

<input type="text" name={i.term} placeholder="TERM" 
value={this.state.allTerms[i].term} 
onChange={(e) =>this.onChange(e,i)}> // <--- Change
</input>

1 commentaires

Ahhh je n'ai pas encore appris l'épissure. J'ignorais également que l'événement ET l'index pouvaient être transmis. Cette information est extrêmement utile. Merci pour l'aide.

1
votes

C'est une mauvaise idée d'avoir votre état mis à jour dans une boucle, je vous suggère d'utiliser opérateur de propagation d'objet et une fois que vous avez terminé de créer l'objet d'état, vous l'assignez à l'état de votre composant:

onChangeTerm = (event) => {
  let allTerms = {}
  for(var i = 0; i < this.props.numberOfTerms.length; i++) {
    allTerms = { ...this.state.allTerms[i], term: event.target.value }
  }
  this.setState({ allTerms });
}

3 commentaires

Merci beaucoup! Cela a beaucoup aidé, et j'ai également vraiment apprécié que vous ayez fourni la ressource sur l'opérateur de diffusion d'objets. J'apprécie votre aide !!

Heureux de vous aider :)

notez que vous pouvez l'utiliser sur un objet et un tableau, la réponse acceptée ici l'utiliser pour créer de nouveaux segments de tableaux

0
votes

Et voilà: tout d'abord, votre entrée doit avoir et id

onChangeTerm = (e) =>  {
e.preventDefault();
 this.setState({ [e.target.id]: e.target.value}); 
 }

ensuite, votre fonction onChange doit être:

<input type="text" id = 'term'/>

troisième , si vous voulez plusieurs entrées de termes , ne répétez pas la même entrée avec le même nom. changez également votre nom d'entrée dans votre état et ne vous mettez pas en boucle for non sensible.

0 commentaires

1
votes

Il y a quelques problèmes avec votre code:

l'état de mise à jour dans la boucle est une mauvaise idée -> peut entraîner de mauvaises performances car il sera souvent rendu
le premier argument de setState est un objet ({key: value}), si vous souhaitez utiliser la clé dynamique, vous devez faire {[dynamicKey]: value}
l'objet d'état est répétitif, je le construirais dynamiquement

Voici un exemple de travail: code sandbox

0 commentaires