如何在特定的onPress Touchable不透明度上使用useState

Question

我有一个屏幕，它输出用户不属于的所有组。每个组都有一个连接按钮，当单击该按钮时，将用户添加到firestore中的组集合下的成员子集合。当用户单击join按钮时，按钮的状态应该从join更改为Joined，当用户再次单击该按钮时，按钮的状态应该从Joined更改为join。

我的问题是，因为所有的按钮都有相同的joinedButton状态，我正在收听，当用户单击一个按钮时，所有按钮的状态都会发生变化，而只有单击的按钮应该改变。使用从firestore查询接收到的承诺的数组映射来输出按钮。任何想法，我可以改变状态，只有已点击的按钮?

import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState, useEffect, useContext } from 'react'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { db } from '../../firebase'
import { AuthContext } from '../../navigation/AuthProvider'
const DiscoverGroupList = ({ navigation }) => {
const [joinedButton, setJoinedButton] = useState(false);
const fetchGroups = async () =>{
//code to
}
const { user } = useContext(AuthContext);
const joinGroup = async (groupId) => {
try {
await db.collection('groups')
.doc(groupId)
.collection('members')
.doc(user.uid)
.set({
userId: user.uid,
isMember: true,
})
setJoinedButton(true)
} catch (error) {
console.log(error)
}
}
const leaveGroup = async (groupId) => {
try {
await db.collection('groups')
.doc(groupId)
.collection('members')
.doc(user.uid)
.delete()
setJoinedButton(false)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
fetchGroups()

}, [joinedButton])
return (
<>
{groupsYouManage.map((item) => (

<View key={item.groupId} style={styles.groupWrapper}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Image source={{ uri: item.groupImage }} style={styles.groupImage} />
<View>
<Text style={styles.groupListTitle}>{item.groupName}</Text>
<Text style={styles.groupMembers}>{item.groupMembers}</Text>
</View>
</View>
{!joinedButton ? (
<TouchableOpacity style={styles.join} onPress={() => joinGroup(item.groupId)}>
<Text style={styles.joinText}>Join</Text>
</TouchableOpacity>
) : (
<TouchableOpacity style={styles.join} onPress={() => leaveGroup(item.groupId)}>
<Text style={styles.joinText}>Joined</Text>
</TouchableOpacity>
)
}
</View>

))}
</>
)

Answer 1

看起来您正在使用ID和isMember: true在成员集合数据库中设置一个值。当您映射数据而不是基于useState joinedButton呈现按钮时，是否可以将按钮设置为基于isMember bool呈现?

{item.isMember ? <leaveGroup button /> : <joinGroupButton />}

Answer 2

我认为为数组中的每个项目创建单独的状态会有所帮助。

import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState, useEffect, useContext } from 'react'

import { TouchableOpacity } from 'react-native-gesture-handler'
import { db } from '../../firebase'
import { AuthContext } from '../../navigation/AuthProvider'

const DiscoverGroupList = ({ navigation }) => {

const fetchGroups = async () =>{
//code to
}

const { user } = useContext(AuthContext);

const joinGroup = async (groupId) => {
try {
await db.collection('groups')
.doc(groupId)
.collection('members')
.doc(user.uid)
.set({
userId: user.uid,
isMember: true,
})
} catch (error) {
console.log(error)
}
}
const leaveGroup = async (groupId) => {
try {
await db.collection('groups')
.doc(groupId)
.collection('members')
.doc(user.uid)
.delete()
} catch (error) {
console.log(error)
}
}

useEffect(() => {
fetchGroups()

}, [joinedButton])

return (
<>
{groupsYouManage.map((item) => {
const [joinedButton, setJoinedButton] = useState(false);
const handleJoin = () => {
joinGroup(item.groupId)
setJoinedButton(true);
}
const handleLeave = () => {
leaveGroup(item.groupId)
setJoinedButton(false);
}

return (
<View key={item.groupId} style={styles.groupWrapper}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Image source={{ uri: item.groupImage }} style={styles.groupImage} />
<View>
<Text style={styles.groupListTitle}>{item.groupName}</Text>
<Text style={styles.groupMembers}>{item.groupMembers}</Text>
</View>
</View>
{!joinedButton ? (
<TouchableOpacity style={styles.join} onPress={handleJoin }>
<Text style={styles.joinText}>Join</Text>
</TouchableOpacity>
) : (
<TouchableOpacity style={styles.join} onPress={handleLeave}>
<Text style={styles.joinText}>Joined</Text>
</TouchableOpacity>
)
}
</View>

)})}
</>
)