Wydaje się, że mam problemy z przesyłaniem danych do tablicy stanów. Staram się to osiągnąć w ten sposób:

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

Ale uważam, że to niewłaściwy sposób i powoduje problemy ze zmiennością?

Wypchnięcie tablicy zwraca długość

this.state.myArray.push('new value')zwraca długość rozszerzonej tablicy zamiast samej tablicy. Array.prototype.push () .

Myślę, że oczekujesz, że zwrócona wartość będzie tablicą.

Niezmienność

Wygląda na to, że jest to raczej zachowanie Reacta:

NIGDY nie modyfikuj this.state bezpośrednio, ponieważ późniejsze wywołanie setState () może zastąpić dokonaną przez Ciebie mutację. Traktuj this.state tak, jakby był niezmienny. React.Component .

Myślę, że zrobiłbyś to w ten sposób (nie znasz Reacta):

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

Używając es6 można to zrobić w następujący sposób:

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

Składnia spreadów

Nigdy nie zaleca się bezpośredniej mutacji stanu.

Zalecanym podejściem w późniejszych wersjach Reacta jest użycie funkcji aktualizatora podczas modyfikowania stanów, aby zapobiec sytuacjom wyścigu:

Wypchnij ciąg na koniec tablicy

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

Wypchnij ciąg na początek tablicy

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

Wypchnij obiekt na koniec tablicy

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

Wypchnij obiekt na początek tablicy

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

W ogóle nie powinieneś operować stanem. Przynajmniej nie bezpośrednio. Jeśli chcesz zaktualizować swoją tablicę, będziesz chciał zrobić coś takiego.

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

Bezpośrednia praca na obiekcie stanu nie jest pożądana. Możesz również przyjrzeć się pomocnikom niezmienności Reacta.

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

Możesz użyć .concatmetody, aby utworzyć kopię swojej tablicy z nowymi danymi:

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

Ale uważaj na specjalne zachowanie .concatmetody podczas przekazywania tablic - [1, 2].concat(['foo', 3], 'bar')spowoduje to [1, 2, 'foo', 3, 'bar'].

Ten kod działa dla mnie:

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

React-Native

jeśli chcesz również, aby Twój UI (np. ur flatList) był aktualny, użyj PrevState: w poniższym przykładzie, jeśli użytkownik kliknie przycisk, doda nowy obiekt do listy (zarówno w modelu, jak iw UI )

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

W następujący sposób możemy sprawdzić i zaktualizować obiekty

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

Tutaj nie możesz wypchnąć obiektu do tablicy stanów, takiej jak ta. Możesz pchać tak jak w normalnej tablicy. Tutaj musisz ustawić stan,

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

Jeśli próbujesz tylko zaktualizować stan w ten sposób

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

Rozważ to podejście

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

Zasadniczo prevState pisze dla nas this.state.