Tôi dường như đang gặp sự cố khi đẩy dữ liệu vào một mảng trạng thái. Tôi đang cố gắng đạt được nó theo cách này:

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

Nhưng tôi tin rằng đây là cách không chính xác và gây ra các vấn đề về khả năng đột biến?

Array push trả về độ dài

this.state.myArray.push('new value')trả về độ dài của mảng mở rộng, thay vì chính mảng. Array.prototype.push () .

Tôi đoán bạn mong đợi giá trị trả về là mảng.

Bất biến

Có vẻ như đó là hành vi của React:

KHÔNG BAO GIỜ đột biến this.state trực tiếp, vì việc gọi setState () sau đó có thể thay thế đột biến bạn đã thực hiện. Hãy đối xử với this.state như thể nó là bất biến. React.Component .

Tôi đoán, bạn sẽ làm như thế này (không quen thuộc với React):

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

Sử dụng es6 nó có thể được thực hiện như thế này:

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

Cú pháp lan truyền

Không bao giờ nên thay đổi trạng thái trực tiếp.

Cách tiếp cận được đề xuất trong các phiên bản React sau này là sử dụng chức năng cập nhật khi sửa đổi trạng thái để ngăn chặn các điều kiện chủng tộc:

Đẩy chuỗi đến cuối mảng

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

Đẩy chuỗi lên đầu mảng

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

Đẩy đối tượng đến cuối mảng

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

Đẩy đối tượng lên đầu mảng

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

Bạn không nên vận hành trạng thái nào cả. Ít nhất, không phải trực tiếp. Nếu bạn muốn cập nhật mảng của mình, bạn sẽ muốn làm điều gì đó như thế này.

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

Làm việc trên đối tượng trạng thái trực tiếp là không mong muốn. Bạn cũng có thể xem các trình trợ giúp về tính bất biến của React.

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

Bạn có thể sử dụng .concatphương pháp để tạo bản sao mảng của mình với dữ liệu mới:

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

Nhưng hãy cẩn thận với hành vi đặc biệt của .concatphương thức khi truyền mảng - [1, 2].concat(['foo', 3], 'bar')sẽ dẫn đến [1, 2, 'foo', 3, 'bar'].

Mã này phù hợp với tôi:

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

React-Native

nếu bạn cũng muốn UI của bạn (tức là. flatList của bạn) được cập nhật, hãy sử dụng PrevState: trong ví dụ dưới đây nếu người dùng nhấp vào nút, nó sẽ thêm một đối tượng mới vào danh sách (cả trong mô hình và giao diện người dùng )

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

Bằng cách sau, chúng ta có thể kiểm tra và cập nhật các đối tượng

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

Ở đây bạn không thể đẩy đối tượng đến một mảng trạng thái như thế này. Bạn có thể đẩy như cách của bạn trong mảng bình thường. Ở đây bạn phải thiết lập trạng thái,

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

Nếu bạn chỉ đang cố gắng cập nhật trạng thái như vậy

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

Hãy xem xét cách tiếp cận này

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

Về cơ bản, State đang viết this.state cho chúng tôi.