ReactJS - setState della chiave Oggetto nell'array

Question

Quindi ho lavorato su questo per un po 'e ho ritenuto che sarebbe meglio rifattorizzare il mio codice in modo che lo stato sia impostato come una matrice di oggetti. Quello che sto cercando di fare è incrementare un numero con un clic del pulsante.

Ho una funzione di callback in un componente che attiva una funzione per aggiornare lo stato ... tuttavia ho difficoltà a individuare il valore della chiave all'interno dell'oggetto.

mio stato iniziale si presenta così:

getInitialState: function() { 
    return { 
     items: [ 
     { 
      links: 'zest', 
      trackId: 1023, 
      songTitle: 'z know the others', 
      artist: 'zuvet', 
      upVotes: 0 
     }, 
     { 
      links: 'alpha', 
      trackId: 987, 
      songTitle: 'ass', 
      artist: 'arme', 
      upVotes: 3 
     }, 
     ] 
    } 

Sto cercando di indirizzare la chiave upVotes, ma non riesco a capire come. La mia funzione passa una chiave in modo da poter indirizzare l'indice nell'array, ma quando provo a fare qualcosa del tipo: this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}}) genera un errore a causa del token imprevisto [.

Ho provato qualcosa di simile a questo thread here, ma continuo a ricevere errori.

Che tipo di funzione posso scrivere per impostare lo stato di solo la chiave nell'oggetto che voglio targetizzare?

Answer 1

Get stato attuale, modificarlo e setState() esso:

var stateCopy = Object.assign({}, this.state); 
stateCopy.items[key].upVotes += 1; 
this.setState(stateCopy); 

Nota: Ciò mutare lo stato. Ecco come farlo senza mutazione:

var stateCopy = Object.assign({}, this.state); 
stateCopy.items = stateCopy.items.slice(); 
stateCopy.items[key] = Object.assign({}, stateCopy.items[key]); 
stateCopy.items[key].upVotes += 1; 
this.setState(stateCopy); 

Answer 2

E 'possibile modificare direttamente il valore sul vostro array e impostare lo stato per l'oggetto modificato, considerando non si sta usando immutable.js, cioè ...

this.state.array[i].prop = 'newValue'; 
this.setState({ array: this.state.array }); 

Il problema con la modifica diretta è che React non conosce lo stato modificato e il ciclo di vita dell'aggiornamento non viene attivato. Ma impostare lo stato di nuovo impone un aggiornamento.

- EDIT -

Se lo stato è immutabile ...

const array = this.state.array.slice(); 
array[i].prop = 'newValue'; 
this.setState({ array });