Какой из этих двух методов лучше управлять состоянием?
При изменении состояния в React какой из них будет предпочтительным (или нет предпочтительного способа)
1)
handleDeleteOption(optionToRemove){
this.setState((prevState)=>({
options: prevState.options.filter((option)=>{
return optionToRemove !== option })
}))
}
или
2)
handleDeleteOption(option){
this.setState((prevState)=>{
const newArray = [...prevState.options]
newArray.splice(newArray.indexOf(option), 1)
return{
options: newArray
}
})
}
Спасибо !
Спасибо за быстрый ответ! :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Есть также:
this.setState({
options: [...this.state.options.splice(optionIndex, 1)]
})
Более короткий и чистый способ.
Разве это не будет прямым изменением состояния в памяти, что не рекомендуется?
Мы используем оператор спреда! Это клонирует объект. Итак, никаких мутаций.
предложения: 1- splice вернет удаленный элемент, а не новый массив без этого элемента, 2- setState является асинхронным, поэтому this.state в setState не является хорошей идеей.
@MayankShukla Я привел только пример, OP может использовать const {options} = this.state вне setState.
Дело в том, что для таких сценариев мы используем функциональный setState (prevState), также не принимайте это на свой счет, это было всего лишь предложением :)
@BhojendraNepal, когда вам нужно вычислить новое значение состояния на основе некоторого предыдущего значения состояния, вы должны передать функцию обратного вызова методу this.setState вместо прямого чтения из this.state. В противном случае велика вероятность получить несинхронизированные данные. См. Дополнительную информацию в официальной документации: reactjs.org/docs/react-component.html#setstate
Фильтр считается более «функциональным» подходом и не использует методы, которые изменяют массив, поэтому вам не нужно знать, что вы должны сначала распространить его на новый. Он также выглядит чище и его можно сковать. Вам также не нужно беспокоиться о том, что indexOf не найдет элемент и не получит неожиданных результатов, если не будет проверен.