Sepertinya saya mengalami masalah saat mendorong data ke dalam array status. Saya mencoba untuk mencapainya dengan cara ini:

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

Tapi saya yakin ini adalah cara yang salah dan menyebabkan masalah dengan mutabilitas?

Array push mengembalikan panjangnya

this.state.myArray.push('new value')mengembalikan panjang dari array yang diperpanjang, bukan dari array itu sendiri. Array.prototype.push () .

Saya kira Anda mengharapkan nilai yang dikembalikan menjadi array.

Kekekalan

Sepertinya ini lebih seperti perilaku React:

JANGAN PERNAH mutasi this.state secara langsung, karena memanggil setState () setelahnya dapat menggantikan mutasi yang Anda buat. Perlakukan negara ini seolah-olah tidak dapat diubah. React.Component .

Saya kira, Anda akan melakukannya seperti ini (tidak terbiasa dengan React):

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

Menggunakan es6 bisa dilakukan seperti ini:

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

Sebarkan sintaks

Tidak pernah disarankan untuk mengubah status secara langsung.

Pendekatan yang direkomendasikan dalam versi React yang lebih baru adalah dengan menggunakan fungsi pembaru saat memodifikasi status untuk mencegah kondisi balapan:

Dorong string ke akhir larik

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

Dorong string ke awal larik

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

Dorong objek ke akhir larik

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

Dorong objek ke awal larik

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

Anda seharusnya tidak mengoperasikan negara sama sekali. Setidaknya, tidak secara langsung. Jika Anda ingin memperbarui larik Anda, Anda akan ingin melakukan sesuatu seperti ini.

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

Mengerjakan objek negara secara langsung tidak diinginkan. Anda juga dapat melihat pembantu keabadian React.

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

Anda dapat menggunakan .concatmetode untuk membuat salinan array Anda dengan data baru:

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

Tetapi berhati-hatilah terhadap perilaku khusus .concatmetode ketika melewati array - [1, 2].concat(['foo', 3], 'bar')akan menghasilkan [1, 2, 'foo', 3, 'bar'].

Kode ini bekerja untuk saya:

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

React-Native

jika Anda juga ingin UI Anda (mis. flatList Anda) diperbarui, gunakan PrevState: pada contoh di bawah ini jika pengguna mengklik tombol, itu akan menambahkan objek baru ke daftar (baik dalam model maupun UI )

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

Dengan cara berikut kita dapat memeriksa dan memperbarui objek

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

Di sini Anda tidak dapat mendorong objek ke array keadaan seperti ini. Anda dapat mendorong seperti cara Anda dalam larik normal. Di sini Anda harus mengatur negara,

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

Jika Anda hanya mencoba memperbarui status seperti itu

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

Pertimbangkan pendekatan ini

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

Pada dasarnya prevState menulis this.state untuk kita.