如何切换地图功能内项目的状态

IT技术 javascript reactjs react-native
2021-04-04 07:05:56

我正在尝试进行标签选择，问题是，我不知道如何为地图中的每个项目创建一个状态，现在我只有一个状态，当然，这会更改所有项目。

这就是状态和切换状态的函数

const [selectedActivity, setSelectedActivity] = useState(false);

const toggleSelectedActivity = () => {
  setSelectedActivity(!selectedActivity);
};

这就是地图功能

<View style={styles.tags}>
  {activitiesObject.map((data, i) => (
    <TouchableOpacity
      key={data.activity}
      onPress={() => toggleSelectedActivity(i)}
    >
      <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>
        {data.activity}
      </Text>
    </TouchableOpacity>
  ))}
</View>;

下图显示了每次用户选择标签时我期望发生的事情

在此处输入图片说明

这是完整的代码： https : //snack.expo.io/KIiRsDPQv

1个回答

您可以执行以下选项之一

  1. 将状态更改为数组
const [selectedActivity, setSelectedActivity] = useState(Array.from({ length: activitiesObject.length }, _ => false))

const toggleSelectedActivity = (index) => 
        setSelectedActivity(prev => prev.map((bool, i) => i == index ? !bool : bool))

在将索引传递给函数时，并使用 selectedActivity[i] ? ...

  1. 提炼
 <TouchableOpacity key={data.activity} onPress={() => toggleSelectedActivity(i)}>
          <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>{data.activity}</Text>
 </TouchableOpacity>

到它自己的组件，并在它内部声明状态

{activitiesObject.map((data, i) => <MyComp data={data} i={i} />

const MyComp = ({ data, i }) => {
  const [selectedActivity, setSelectedActivity] = useState(false)
  return  <TouchableOpacity key={data.activity} onPress={() => setSelectedActivity(prev => !prev)}>
            <Text style={selectedActivity ? styles.selectedTag : styles.tagsText}>{data.activity}</Text>
          </TouchableOpacity> 
}
@Hagai Harari 这是有用的信息，我最后感谢你;)
2021-05-30 07:05:56
杰出的！谢谢
2021-06-13 07:05:56
@高鹏翔你是对的，我忘记)了toggleSelectedActivity ，编辑我的答案
2021-06-16 07:05:56
@Hagai Harari 这是另一种方法 Array(activitiesObject.length).fill(false)
2021-06-20 07:05:56
很抱歉问一个问题，我对数组 usestate 很感兴趣，但是我尝试在他的链接中发布您的代码以涵盖更改，总是显示Unexpected token, expected "," 我需要注意吗？
2021-06-21 07:05:56
其它你可能感兴趣的问题
上一篇在浏览器上执行不同的Promise，发生了什么？ 下一篇如何在 React 中创建可重用的自定义模态组件？