Кажется, у меня проблемы с помещением данных в массив состояний. Я пытаюсь добиться этого таким образом:

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

Но я считаю, что это неправильный способ и вызывает проблемы с изменчивостью?

Ilja

Ответы (13)

Отправка массива возвращает длину

this.state.myArray.push ('новое значение') возвращает длину расширенного массива вместо самого массива.Array.prototype.push ().

Думаю, вы ожидаете, что возвращаемое значение будет массивом.

Неизменяемость

Похоже, это скорее поведение React:

НИКОГДА не изменяйте this.state напрямую, так как впоследствии вызов setState () может замените произведенную вами мутацию. Относитесь к this.state как к неизменяемый.React.Component.

Думаю, вы бы сделали это так (не знаком с React):

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

Этот код работает для меня:

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

Используя перехватчики реакции, вы можете сделать следующее

const [countryList, setCountries] = useState([]);


setCountries((countryList) => [
        ...countryList,
        "India",
      ]);

Я думаю, это немного поздно для ответа, но для новичков отреагируют

Вы можете использовать этот крошечный пакет под названием immer

см. Этот пример: https://immerjs.github.io/immer/produce

Функциональные компоненты и перехватчики

const [array,setArray] = useState([]);

Вставить значение в конце:

setArray(oldArray => [...oldArray,newValue] );

Значение push при попрошайничестве:

setArray(oldArray => [newValue,...oldArray] );

Следующим образом мы можем проверять и обновлять объекты

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

Здесь нельзя воткнуть объект в массив состояний вот так. Вы можете продвигаться по-своему в обычном массиве. Здесь вы должны установить состояние,

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

вы нарушаете принципы React, вам следует клонировать старое состояние, а затем объединить его с новыми данными, вы не должны напрямую манипулировать своим состоянием, ваш код должен выглядеть так

fetch ('http://localhost: 8080'). Then (response => response.json ()). Then (json = {this.setState ({mystate [... this.state.mystate, json]})})

Используя es6, это можно сделать так:

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

Синтаксис разворота

React-Native

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

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

Вы можете использовать метод .concat для создания копии вашего массива с новыми данными:

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

Но будьте осторожны с особенностями поведения метода .concat при передаче массивов - [1, 2] .concat (['foo', 3], 'bar') приведет к in [1, 2, 'foo', 3, 'bar'].

Вы вообще не должны управлять состоянием. По крайней мере, не напрямую. Если вы хотите обновить свой массив, сделайте что-то вроде этого.

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

Работать напрямую с объектом состояния нежелательно. Вы также можете взглянуть на помощников неизменяемости React.

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

Никогда не рекомендуется напрямую изменять состояние.

В более поздних версиях 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]
}))

2022 WebDevInsider