Mi sembra di avere problemi a inserire i dati in un array di stato. Sto cercando di ottenerlo in questo modo:

this.setState({ myArray: this.state.myArray.push('new value') })

Ma credo che questo sia un modo errato e causi problemi con la mutabilità?

Il push di array restituisce la lunghezza

this.state.myArray.push('new value')restituisce la lunghezza dell'array esteso, invece dell'array stesso. Array.prototype.push () .

Immagino che ti aspetti che il valore restituito sia l'array.

Immutabilità

Sembra che sia piuttosto il comportamento di React:

NON modificare MAI this.state direttamente, poiché chiamare setState () in seguito potrebbe sostituire la mutazione che hai fatto. Tratta this.state come se fosse immutabile. React.Component .

Immagino che lo faresti in questo modo (non ho familiarità con React):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

Usando es6 può essere fatto in questo modo:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Diffondere la sintassi

Mai consigliato di mutare lo stato direttamente.

L'approccio consigliato nelle versioni successive di React consiste nell'usare una funzione di aggiornamento quando si modificano gli stati per evitare condizioni di competizione:

Spinge la stringa alla fine dell'array

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

Spinge la stringa all'inizio dell'array

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

Spinge l'oggetto alla fine dell'array

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

Spinge l'oggetto all'inizio dell'array

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Non dovresti assolutamente gestire lo stato. Almeno, non direttamente. Se vuoi aggiornare il tuo array, ti consigliamo di fare qualcosa di simile.

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

Lavorare direttamente sull'oggetto stato non è desiderabile. Puoi anche dare un'occhiata agli aiutanti dell'immutabilità di React.

https://facebook.github.io/react/docs/update.html

Puoi utilizzare il .concatmetodo per creare una copia del tuo array con nuovi dati:

this.setState({ myArray: this.state.myArray.concat('new value') })

Ma attenzione al comportamento speciale del .concatmetodo quando si passano gli array: [1, 2].concat(['foo', 3], 'bar')risulterà in [1, 2, 'foo', 3, 'bar'].

Questo codice funziona per me:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

React-Native

se vuoi che anche la tua UI (es. ur flatList) sia aggiornata, usa PrevState: nell'esempio seguente se l'utente fa clic sul pulsante, aggiungerà un nuovo oggetto all'elenco (sia nel modello che nell'interfaccia utente )

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

Nel modo seguente possiamo controllare e aggiornare gli oggetti

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

Qui non è possibile eseguire il push dell'oggetto in un array di stato come questo. Puoi spingere come preferisci nel normale array. Qui devi impostare lo stato,

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Se stai solo cercando di aggiornare lo stato in questo modo

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

Considera questo approccio

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

Fondamentalmente prevState sta scrivendo this.state per noi.