Как установить позицию в списке
У меня есть список, и я хочу установить только второй элемент в обработчике событий. Я пытаюсь установить с помощью lists: this.state.lists[1], но выдает сообщение об ошибке this.state.lists.map is not a function. Как правильно указать элемент из списка? вот что я делаю:
constructor(props) {
super(props);
this.state = {
lists: []
};
this.buttonAHandler = this.buttonAHandler.bind(this);
}
componentDidMount() {
fetch('https://api.com')
.then(response => response.json())
.then(data => this.setState({ lists: data }));
}
buttonAHandler(e) {
this.setState({
lists: this.state.lists[1]
})
}
в моем возврате рендера я привязываю обработчик следующим образом:
render(){
return (
<div>
<button onClick = {this.buttonAHandler.bind(this)} >see pets</button>
Да, у меня есть список элементов, и при нажатии кнопки я хочу установить состояние только для второго элемента.
Извините, я все еще не понимаю, о чем вы. Не могли бы вы подробнее рассказать, как вы хотите «установить состояние только для 2-го элемента»?
@Deke Это не прояснило, что вы пытаетесь сделать. Вы хотите, чтобы lists оставался массивом, но обновлял отдельный элемент в массиве, или вы хотите, чтобы lists стал элементом в массиве и выбросил остальные элементы?
Допустим, this.state.lists - это [{a: "abc"}, {b: "def"}], при нажатии кнопки я хочу установить состояние для второго элемента, который является {b:"def"}.
@Deke Значит, после внесения изменений console.info(this.state.lists) вернет {b: "def"}, правильно?
Предположительно, но я получаю сообщение об ошибке :(
@Deke Вы, вероятно, используете где-то еще в своем приложении код, который предполагает, что this.state.lists - это массив. Основываясь на вашем сообщении об ошибке, я бы предположил, что виновником является this.state.lists.map(). Вы меняете его с массива на объект, поэтому .map() выдает ошибку
Матеус прав. Я не использовал такой массив: [this.state.lists [1]]. Спасибо Tholle, mhodges
Таким образом, ваш вывод В самом деле должен быть [{b: "def"}] - большая разница от того, что вы сказали выше.
Ответы 1
Вы получаете сообщение об ошибке, потому что после щелчка состояние lists меняется с Array на Object (индекс 1 массива). Итак, если вы хотите по-прежнему использовать метод map(), измените обработчик на:
buttonAHandler(e) {
this.setState({
lists: [this.state.lists[1]]
})
}
Тогда новое состояние lists будет Array только с тем элементом, который вам нужен.
@mhodges, вероятно, для рендеринга данных используется map(). Затем, после перехода с Array на Òbject, это больше невозможно.
Да, именно то, о чем я думал. Похоже, что OP просто запуталась в комментариях выше. Ваше решение - это то, что они искали - удаление моего предыдущего комментария, поскольку он теперь устарел.
Что вы имеете в виду, говоря «хотите установить только второй элемент»? Вы хотите удалить все элементы в массиве, кроме 2-го элемента, или хотите что-то изменить во 2-м элементе?