创建一个数组以一次更改一个项目的颜色

Question

我创建了一个点赞功能，它只为单个项目改变颜色，并且该项目根据其 id 被点赞，但是当我喜欢第一个项目时，相同的 id 被传递但所有图标都是也变成红色，我该如何撤消？

我的点赞功能如下：

onButtonPress = async(item) => {
    console.log(item)
    console.log(this.state.buttonColor,'hello')
    if(this.state.buttonColor='white'){
    try {
      const response = await fetch("some url"+item._id);
      const resJson = await response.text();
      this.setState({

        buttonColor:'red',

      }, console.log(resJson),
      console.log(this.state.buttonColor,'hi'));
    }
    catch (error) {
      console.error(error);
    }
  }

  };

我在平面列表中调用了这个函数作为图标，我将在下面分享图标的片段：

  <TouchableOpacity
                 onPress= {() => this.onButtonPress(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.buttonColor}

                />
              </TouchableOpacity>

做吧，如果您还需要什么，告诉我怎么做？

Answer 1

您需要存储在具有活动状态（红色）的状态元素的 ID 中。

onButtonPress = async(item) => {
    if(!this.state.likedItemIds.includes(item._id)){
       try {
         const response = await fetch("some url"+item._id);
         const resJson = await response.text();
         this.setState(prevState => ({
           likedItemIds: [...prevState.likedItemIds, item._id]
         }))
       }
       catch (error) {
         console.error(error);
       }
    }
};

<TouchableOpacity
 onPress= {() => this.onButtonPress(item)}
  style={{
    alignItems: 'center',
    borderRadius: 60,
    padding: 10,
  }}>
  <Icon
    name="heart"
    size={30}
    color={state.likedItemIds.includes(item._id) ? "red" : "white"}
  />
</TouchableOpacity>

Answer 2

声明新状态名称ItemId

将项目分配到来自 this.onButtonPress(item) 方法的 ItemId 状态由于每个图标都有唯一的 ID，所以

代码如下：

             <Icon
                  name="heart"
                  size={30}
                  color={this.stateItemId==IconId?.this.state.buttonColor:'White'}    
                />

Answer 3

它将适用于所有其他人，因为您不是通过 ID 进行操作。

尝试通过 ID 或索引进行操作。 Flatlist render func 为您提供索引。

创建一个数组以一次更改一个项目的颜色

create an array to change color of one item at a time

reactjs

react-native

react-native-android