3
votes

Besoin d'ajouter un objet à un tableau qui est dans l'état

J'ai besoin d'ajouter un objet au dernier objet d'un tableau

J'ai un tableau qui contient des objets dans l'état d'une classe

    (this.state.items.length-1).concat({filters:{
        refine:true
    }}

Je dois ajouter un objet filtre au dernier objet objet

items:[{key:"333",val:"Hi"},{key:"555", val:"Iam",filter:{refine:true}}]

J'ai essayé celui ci-dessous

state={
items:[{key:"333",val:"Hi"},{key:"555", val:"Iam"}]
}

javascript reactjs object arrays

9 commentaires

Qu'as-tu essayé? Cela semble une tâche assez simple. Récupérez le dernier élément du tableau, puis ajoutez-y la clé filter .

Que diriez-vous de ARRAY [ARRAY.length-1] pour accéder au dernier élément à partir de array ?

"J'ai essayé celui ci-dessous" - Il semble que vous devriez jeter un autre coup d'œil à un didacticiel JavaScript sur comment travailler avec des tableaux .

"qui est dans l'état" ... alors vous voulez faire cela de manière immuable?

Je suppose que cela est lié à l'état de React

Double possible de Comment changer la valeur d'un objet qui se trouve dans un tableau en utilisant JavaScript ou jQuery?

@giorgim cela pourrait être lié à reactjs mais la question peut toujours tenir indépendamment

Oui c'est lié à react js

@Jagrati Author a dit qu'il était lié à la réaction, donc la balise doit être là.

3 Réponses :

1
votes

Vous pouvez simplement accéder au dernier objet en utilisant la méthode index du tableau, le modifier et mettre à jour le tableau d'état

let state={
    items:[{key:"333",val:"Hi"},{key:"555", val:"Iam"}]
}
let last = state.items[state.items.length - 1];
last = {...last, filter:{refine:true}};

const newState = {
  ...state,
  items: [
      ...state.items.slice(0, -1),
      last
  ]
}

console.log(newState);

1 commentaires

Juste une suggestion. Au lieu de state.items [state.items.length - 1]; , vous pouvez essayer state.items.pop () . Cela vous évite de trancher à nouveau. De plus, oui, cela mute le state.items , mais vous définissez de toute façon un nouvel état, donc ne devrait pas avoir ce grand impact

-1
votes

Vous pouvez prendre le dernier élément et ensuite y fusionner obj et l'ajouter à nouveau à la fin du tableau

let state={items:[{key:"333",val:"Hi"},{key:"555", val:"Iam"}]}

let obj = {filter:{refine:true}}

let add = (initial,obj) => {
  let last = initial[initial.length-1]
  let arr = [...initial].slice(0,-2)
  return [...initial, {...last, ...obj}]
}
state.items = add(state.items,obj)

console.log(state)

0 commentaires

-1
votes

Avec quelques petits assistants ....

 this.setState(lens("items", mapIndex(-1, it => ({ ...it, filter: { refine: true }}))));

c'est aussi simple que:

 const lens = (key, fn) => obj => ({ ...obj, [key]: fn(obj[key]) });
 const mapIndex = (index, fn) => arr => arr.map((it, i) => i === (index + arr.length) % arr.length ? fn(it) : it);

0 commentaires