Удалить первый элемент массива в состоянии реакции
Я знаю, как это сделать, но пытаюсь так и не знаю, почему это не сработает?
drawCard = () => {
const deck = this.state.cards;
deck.shift();
console.info(deck, 'deck'); //this is correctly logging one less everytime
this.setState({cards: deck})
}
карты это просто набор объектов
поэтому даже если функция вызывается и журнал консоли работает, почему он не обновляет состояние?
(console.info (state.cards.length) всегда возвращает 3)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
в ответ вы не можете просто изменить состояние, вам необходимо создать копию своего состояния перед обновлением,
Самый простой способ сделать это - просто заменить это:
const deck = this.state.cards;
в это:
const deck = [...this.state.cards];
Я думаю, вы новичок в reactjs, вам лучше проверить подход к состоянию реакции (medium.freecodecamp.org/…) (хорошая статья об этом). в любом случае, вы не меняете значение состояния, вы должны получить копию данных, затем изменить копию и, наконец, использовать функцию setState, которая обновит ваше состояние
Не используйте методы, изменяющие состояние (например, Array#shift). Вместо этого вы можете использовать Array#slice для возврата неглубокой копии части массива:
drawCard = () => {
this.setState({ cards: this.state.cards.slice(1) })
}
хорошо, это когда я регистрирую это в функции, но не когда я регистрирую состояние в рендере ?!
Возможно, вам стоит поделиться полным кодом вашего компонента.
да, у меня была кобыла, извини. отсортировано сейчас: D
Проблема возникает из-за того, что вы напрямую изменяете состояние. Хотя вы назначаете состояние «колода», помните, что в Javascript массивы и объекты являются ссылками. Итак, когда вы изменяете колоду, вы фактически пытаетесь изменить само состояние. Вы можете использовать другие методы для создания копии значений состояний и их изменения.
Вы можете найти это полезным: Реагировать - изменение состояния без использования setState: нужно ли этого избегать?
Вы мутируете
state. Попробуйтеconst deck = [...this.state.cards];