如何在数组中的对象项上设置状态

Posted 2023-02-22

【中文标题】如何在数组中的对象项上设置状态

【英文标题】：How to setState on Object item within array

【发布时间】：2020-02-05 18:30:14

【问题描述】：

我想在按下心形图标时更新数组对象中关键心形的状态，它变为红色，因此为此我使用反应本机图标，并且在单击它时使用 heart 和 hearto 进行切换

p>

代码如下：

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"
      
    );
  ;

这是心形图标代码

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

请帮助我如何在点击时将 heart 更新为 heart 而不是 hearto

【参考方案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>

希望对你有帮助

【参考方案2】：

编辑此函数如下：

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

【讨论】：

谢谢，亲爱的你的回复。当我再次点击它时它会部分工作，它应该恢复，但不是这种方式

使用 bool 值而不是字符串作为 heart 并在每次点击时切换。或使用基于 this.state.localAdversiment[index].heart.

的 if else 条件