Как установитьState на объекте Object в массиве

Question

Я хочу обновить состояние ключевого сердца в объектах массива, когда нажатая иконка сердца меняет цвет на красный, поэтому для этого я использую собственные значки реакции и использую сердце и сердце для переключения при нажатии на него

вот код:

state = {      
          localAdversiment: [
            {
              title: "Ecloninear 871",
              image: require("../../assets/images/truck_image.png"),
              year: "2015",
              type: "Truck",
              status: "new",
              price: "$ 2000",
              heart: "hearto"
            }

Здесь это функция, которая вызывается при нажатии иконки сердца

 handleFavourite = index => {
    const { heart } = this.state.localAdversiment[index];
    this.setState(
      {
        heart: "heart"
      }
    );
  };

вот код сердца icon

<TouchableOpacity onPress={() => this.handleFavourite(index)}>
                <Icon
                  name={item.heart}
                  type={"AntDesign"}
                  style={{ fontSize: 18 }}
                />
              </TouchableOpacity>

любезно помогите мне как обновить сердце как сердце вместо сердечного при нажатии

Answer 1

Вы можете сделать это легко, следуя подходу

state = {      
          localAdversiment: [
            {
              id: 0,
              title: "Ecloninear 871",
              image: require("../../assets/images/truck_image.png"),
              year: "2015",
              type: "Truck",
              status: "new",
              price: "$ 2000",
              heart: "hearto",
              selected: false
            }
}

теперь в onPress сделайте это

handleFavourite = (item) => {
   const { id } = item;
   this.setState({
       localAdvertisement: this.state.localAdvertisement.map((item) => {
         if(item.id === id){
           return {
              ...item,
              selected: !item.selected  
           }
         }

         return item

    })
  })
};

Теперь визуализируйте так

             <TouchableOpacity onPress={() => this.handleFavourite(item)}>
                <Icon
                  name={item.selected ? "heart" : 'hearto'}
                  type={"AntDesign"}
                  style={{ fontSize: 18 }}
                />
              </TouchableOpacity>

Надеюсь, что так и будетпомочь вам

Answer 2

Отредактируйте эту функцию следующим образом:

handleFavourite = index => {
    let updatedlocalAdversimentStates = this.state.localAdversiment;
    updatedlocalAdversimentStates[index].heart = "heart";
    this.setState(
      {
        localAdversiment: updatedlocalAdversimentStates
      }
    );
  };