У мене, здається, виникають проблеми з підштовхуванням даних у масив стану. Я намагаюся досягти цього таким чином:

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

Але я вважаю, що це неправильно і викликає проблеми з незмінністю?

Натискання масиву повертає довжину

this.state.myArray.push('new value')повертає довжину розширеного масиву замість самого масиву. Array.prototype.push () .

Я думаю, ви очікуєте, що повернене значення буде масивом.

Незмінюваність

Здається, це скоріше поведінка React:

НІКОЛИ не мутуйте this.state безпосередньо, оскільки виклик setState () згодом може замінити зроблену вами мутацію. Ставтеся до цієї держави, ніби вона непорушна. Реакт.компонент .

Я думаю, ви зробили б це так (не знайоме з React):

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

За допомогою es6 це можна зробити так:

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

Поширити синтаксис

Ніколи не рекомендується мутувати стан безпосередньо.

Рекомендований підхід у пізніших версіях React полягає у використанні функції оновлення при зміні станів для запобігання перегоновим умовам:

Натисніть рядок до кінця масиву

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

Натисніть рядок до початку масиву

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

Натисніть об’єкт до кінця масиву

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

Натисніть об’єкт до початку масиву

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

Ви не повинні керувати державою взагалі. Принаймні, не безпосередньо. Якщо ви хочете оновити масив, ви хочете зробити щось подібне.

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

Робота над об'єктом держави безпосередньо небажана. Ви також можете поглянути на помічників React про незмінність.

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

Ви можете використовувати .concatметод для створення копії масиву з новими даними:

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

Але остерігайтеся особливої ​​поведінки .concatметоду при передачі масивів - [1, 2].concat(['foo', 3], 'bar')це призведе до [1, 2, 'foo', 3, 'bar'].

Цей Кодекс працює для мене:

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

Реакція-Рідна

якщо ви також хочете, щоб інтерфейс ур (наприклад, ur flatList) був оновлений, використовуйте PrevState: у наведеному нижче прикладі, якщо користувач натискає кнопку, він додасть новий список до списку (і в моделі, і в інтерфейсі користувача) )

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

У такий спосіб ми можемо перевірити та оновити об'єкти

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

Тут ви не можете натиснути об’єкт на такий масив стану. Ви можете просуватися як звичайний масив. Тут ви повинні встановити стан,

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

Якщо ви просто намагаєтесь так оновити стан

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

Розглянемо такий підхід

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

В основному prevState пише для цього this.state.