Я реализую типичную функциональность «Любимый элемент» в моем собственном приложении React, где я отображаю список элементов, на каждом из которых есть значок «сердечко». Значок «пустое сердце» будет отображаться, если элемент не добавлен в избранное, а значок «заполненное сердечко» - в противном случае. При нажатии на значок пустого сердца этот элемент правильно добавляется в мой массив favCakes, см. Код ниже:
renderFavHeart = () => {
console.log('FAVCAKES', this.props.favCakes)
//console.log('CAKE', this.props.cake)
const { cake } = this.props;
let isFav;
if (this.props.favCakes.length !== 0) {
isFav = this.props.favCakes.some(fav => cake.id === fav.cake)
if (isFav) {
return <Icon name="md-heart" onPress={this.handleUnfavCake} size={35} color="red" />
}
else return <Icon name="md-heart-empty" onPress={this.handleFavCake} size={35} color="red" />
}
else return <Icon name="md-heart-empty" onPress={this.handleFavCake} size={35} color="red" />
}
Вот соответствующий код редуктора:
favCakes: [...state.favCakes, action.payload]
I подтвердили через console.log, что мой массив favCakes изменяется правильно (добавлен элемент), однако экран не перерисовывается, то есть после нажатия на него пустой значок все еще присутствует. Он будет обновляться соответствующим образом только при перезапуске приложения. Есть какие-нибудь идеи? Заранее спасибо.