如何在平面列表中选择单个项目

Question

我试图在FlatList中选择单个项目。期望的功能是点击取消关注，并且已经点击的特定项目从"取消关注"变为"关注"。到目前为止，我已经成功地完成了这个功能，但问题是，当我手动重新渲染组件时，会进行更改。

代码如下:

function FolloweringScreens({
All my props here
}) {
const [refresh, setRefresh] = useState(false);
const onClickItem = (item, index) => {
return item.isFollowed
? (item.isFollowed = false)
: (item.isFollowed = true);
};
return (
<>
<FlatList
scrollEnabled={true}
onEndReachedThreshold={0}
refreshing={refresh}
onRefresh={handleFetch}
onEndReached={noMoreData || loadingMore ? null : handleMoreData}
data={data}
style={{marginTop: height * 0.07}}
keyExtractor={(i, index) => index.toString()}
renderItem={({item, index}) => {
return (
<>
<TouchableHighlight
style={styles}
underlayColor="transparent"
onPress={() => navigation.navigate('Profile page', {item})}>
<View
style={styles}>
{User avatar and users Name components here}
{screen === 'Followers' ? (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
item.isFollowing
? onClickItem(item, index)
: onClickItem(item, index);
}}>
{item.isFollowing ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
) : (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
item.isFollowed
? onClickItem(item, index)
: onClickItem(item, index); <<<<-- This is where I am selecting the item
}}>
{item.isFollowed ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
)}
</View>
</TouchableHighlight>
</>
);
}}
/>
</>
);
}
export default FolloweringScreens;

Answer 1

我没有看到"data"来自，但我想是来自道具。试图修改道具是一种不好的做法，不应该这样做，所以我建议处理状态中的数据，像这样:

function FolloweringScreens({
All my props here
}) {
const [stateData, setStateData] = useState(data);
const [refresh, setRefresh] = useState(false);
const onClickItem = (index) => {
const stateDataCopy = [...stateData];
stateDataCopy[index].isFollowed = !stateDataCopy[index].isFollowed;
setStateData(stateDataCopy);
};
return (
<>
<FlatList
scrollEnabled={true}
onEndReachedThreshold={0}
refreshing={refresh}
onRefresh={handleFetch}
onEndReached={noMoreData || loadingMore ? null : handleMoreData}
data={stateData}
style={{marginTop: height * 0.07}}
keyExtractor={(i, index) => index.toString()}
renderItem={({item, index}) => {
return (
<>
<TouchableHighlight
style={styles}
underlayColor="transparent"
onPress={() => navigation.navigate('Profile page', {item})}>
<View
style={styles}>
{User avatar and users Name components here}
{screen === 'Followers' ? (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
onClickItem(index);
}}>
{item.isFollowing ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
) : (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
onClickItem(index);
}}>
{item.isFollowed ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
)}
</View>
</TouchableHighlight>
</>
);
}}
/>
</>
);
}
export default FolloweringScreens;

可能这段代码不能工作，但这里的想法是，您将数据存储在本地状态并修改" isfollowing "值。

Answer 2

我设法修复它通过改变初始数据时，取消关注或关注按钮被点击。下面是代码:

function FolloweringScreens({
bunch of props here,
data,
setfollowingData,
}) {
const [refresh, setRefresh] = useState(false);
const [stateData, setStateData] = useState();
useEffect(() => {
setStateData(data);
}, [data]);
const onClickItem = (item, index) => {
const newArrData = data.map((e, index) => {
if (item.profileName === stateData[index].profileName) {
item.isFollowed
? unfollowUser(username, item.profileName)
: followUser(username, item.profileName);
return {...e, isFollowed: !stateData[index].isFollowed};
}
return {
...e,
isFollowed: true,
};
});
setfollowingData(newArrData);
};
return (
<>
<FlatList
scrollEnabled={true}
onEndReachedThreshold={0}
refreshing={refresh}
onRefresh={handleFetch}
onEndReached={noMoreData || loadingMore ? null : handleMoreData}
data={stateData}
style={{marginTop: height * 0.07}}
keyExtractor={(i, index) => index.toString()}
renderItem={({item, index}) => {
return (
<>
<TouchableHighlight
style={styles}
underlayColor="transparent"
onPress={() => navigation.navigate('Profile page', {item})}>
<View
style={styles}>
{User Avatar and User Username components here}
{screen === 'Followers' ? (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
// item.isFollowing
//   ? unfollowUser(username, item.profileName)
//   : followUser(username, item.profileName);
item.isFollowing
? onClickItem(item, index)
: onClickItem(item, index);
}}>
{item.isFollowing ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
) : (
<View>
<TouchableHighlight
underlayColor="transparent"
style={{marginLeft: 0}}
onPress={() => {
// item.isFollowed
// ? (item.isFollowed = false)
// : // unfollowUser(username, item.profileName)
//   followUser(username, item.profileName);
item.isFollowed
? onClickItem(item, index)
: onClickItem(item, index); <-This is where item is selected
}}>
{item.isFollowed ? (
<Text>Unfollow</Text>
) : (
<Text>Follow</Text>
)}
</TouchableHighlight>
</View>
)}
</View>
</TouchableHighlight>
</>
);
}}
/>
</>
);
}
export default FolloweringScreens;