如何在數組中的 Object 項目上設置狀態

Question

我想更新數組對象中關鍵心臟的 state 當心臟圖標被按下時它變為紅色所以為此我使用反應本機圖標並且我使用 heart 和 hearto 在單擊它時進行切換

這是代碼：

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

這里是 function 按下心臟圖標時調用

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

這是心臟圖標代碼

<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

編輯這個 function 如下：

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