Реагировать на родной, как объединить два массива с функцией
У меня есть две функции, и когда я нажимаю каждую из них, я создаю массив.
this.state = {
food:[],
sports:[],
interest:[],
}
_favoriteFood(foodState){
const food = foodState
this.setState({food:food})
console.info(food)
console.info(this.state.food)
}
_favoriteSports(SportsState){
const sports = SportsState
this.setState({sports:sports})
console.info(sports)
console.info(this.state.sports)
}
render(){
return (
<View>
<FavoriteFood favoriteFood = {this._favoriteFood}/>
</View>
<View>
<FavoriteSports favoriteSports = {this._favoriteSports}/>
</View>
)}
Так, например, я получаю такие массивы, как food:[pizza, hodog] и sports:[basketball, surfing], когда вызываю метод нажатием кнопки.
У меня вопрос, когда я пытаюсь объединить два массива, например:
const interest = [...this.state.food, ...this.state.sports]
Он показывает undefined, потому что я думаю, что вызываю его до того, как произойдет рендеринг.
Должен ли я сделать другой метод для объединения массивов? Любые советы или комментарии были бы действительно полезны. Заранее спасибо :)
Я отредактировал свой текст. Пожалуйста, посмотрите Спасибо!
Код и вопрос очень несовместимы. Например, вы используете 3 (!) Разных имени для одной переменной: food, toggle1 и toggle1Text.
@ Изящество моей ошибки. Я редактировал код.
Тем не менее, я не понимаю, где вы делаете это задание и используете его.
Кроме того, постарайтесь не создавать дополнительное состояние (интересное здесь), если вы можете управлять им из текущего состояния.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема может возникнуть из-за того, что React не меняет состояние сразу после вызова setState, он может изменить состояние позже. Если вы хотите получить доступ к состоянию после того, как React применит изменение, вы должны использовать второй аргумент метода setState:
_favoriteFood(food){
this.setState({food}, () => {
const interest = [...this.state.food, ...this.state.sports];
});
}
Другое решение - использовать аргумент вашего метода вместо чтения того же значения из this.state:
_favoriteFood(food){
this.setState({food});
const interest = [...food, ...this.state.sports];
}
Кстати, вы не должны хранить const interest = [...this.state.food, ...this.state.sports] в состоянии, потому что он может быть получен из других переменных состояния.
спасибо большое, он отлично работает. В консоли теперь я вижу объединенные массивы.
но как мне вызвать объединенные массивы внутри render() {return()}?
@kirimi Внутри render так: const interest = [...this.state.food, ...this.state.sports];. Метод render должен иметь возможность отображать любое возможное состояние компонента, поэтому создайте оператор if, который отображает что-то еще, когда значение не определено.
@kirimi Или добавьте значение по умолчанию для элемента состояния. Согласно вашему вопросу, ни this.state.food, ни this.state.sports не могут быть неопределенными в любой момент времени (если методам заданы значения).
Вставить несколько элементов в массив
Объединить два массива
var subject1=['item1','item2']
var subject=['item3','item4','item5'];
subject1.push(...subject)
console.info(subject1);
//output
['item1', 'item2', 'item3', 'item4', 'item5']
Где и когда вы вызываете функцию, объединяющую эти состояния?