Verileri bir durum dizisine aktarmada sorunlar yaşıyorum. Bunu şu şekilde başarmaya çalışıyorum:

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

Ama bunun yanlış bir yol olduğuna ve değişkenlikle ilgili sorunlara neden olduğuna inanıyorum.

Dizi itme uzunluğu döndürür

this.state.myArray.push('new value')dizinin kendisi yerine genişletilmiş dizinin uzunluğunu döndürür. Array.prototype.push () .

Sanırım döndürülen değerin dizi olmasını bekliyorsunuz.

Değişmezlik

Görünüşe göre daha çok React'in davranışı:

Bu.state'i ASLA doğrudan değiştirmeyin, çünkü daha sonra setState () çağrısı yaptığınız mutasyonun yerini alabilir. Bunu, değişmezmiş gibi ele alın. React.Component .

Sanırım, bunu şu şekilde yapardınız (React'e aşina değilsiniz):

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

Es6 kullanarak şu şekilde yapılabilir:

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

Yayılmış sözdizimi

Devletin doğrudan mutasyona uğratılması asla tavsiye edilmez

Sonraki React sürümlerinde önerilen yaklaşım, yarış koşullarını önlemek için durumları değiştirirken bir güncelleme işlevi kullanmaktır:

Dizeyi dizinin sonuna itin

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

Dizeyi dizinin başına it

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

Nesneyi dizinin sonuna it

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

Nesneyi dizinin başına it

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

Eyaleti hiç işletmemelisiniz. En azından doğrudan değil. Dizinizi güncellemek istiyorsanız, bunun gibi bir şey yapmak isteyeceksiniz.

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

Doğrudan durum nesnesi üzerinde çalışmak arzu edilmez. React'in değişmezlik yardımcılarına da göz atabilirsiniz.

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

.concatDizinizin kopyasını yeni verilerle oluşturmak için yöntemi kullanabilirsiniz :

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

Ancak .concatdizileri iletirken yöntemin özel davranışına dikkat edin - [1, 2].concat(['foo', 3], 'bar')sonuç olacaktır [1, 2, 'foo', 3, 'bar'].

Bu Kod benim için çalışıyor:

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

Tepki-Yerli

Kullanıcı arayüzünüzün de (ör. ur flatList) güncel olmasını istiyorsanız, PrevState'i kullanın: aşağıdaki örnekte kullanıcı düğmeyi tıklarsa, listeye yeni bir nesne ekleyecektir (hem modelde hem de kullanıcı arayüzünde )

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

Aşağıdaki şekilde nesneleri kontrol edip güncelleyebiliriz

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

Burada nesneyi böyle bir durum dizisine itemezsiniz. Normal dizide kendi yolunuz gibi itebilirsiniz. Burada durumu ayarlamalısın,

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

Sadece durumu böyle güncellemeye çalışıyorsanız

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

Bu yaklaşımı düşünün

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

Temelde prevState this.state'i bizim için yazıyor.