如何 select FlatList 中的单个项目
How to select individual item in FlatList
我正在尝试 select FlatList 中的单个项目。想要的功能是点击取消关注,被点击的具体项目由'unfollow'变为'follow'。到目前为止,我已经设法完成了这个功能,但问题是当我手动重新渲染组件时发生了变化。
代码如下:
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;
我设法通过在单击取消关注或关注按钮时更改初始数据来修复它。这是代码:
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;
我不知道“数据”从何而来,但我想它来自道具。尝试修改道具是一种不好的做法,永远不应该这样做,所以我建议处理状态中的数据,如下所示:
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;
可能这个确切的代码不起作用,但这里的想法是将数据存储在本地状态中,并在单击项目时修改该状态数据的“isFollowed”值。
我正在尝试 select FlatList 中的单个项目。想要的功能是点击取消关注,被点击的具体项目由'unfollow'变为'follow'。到目前为止,我已经设法完成了这个功能,但问题是当我手动重新渲染组件时发生了变化。
代码如下:
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;
我设法通过在单击取消关注或关注按钮时更改初始数据来修复它。这是代码:
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;
我不知道“数据”从何而来,但我想它来自道具。尝试修改道具是一种不好的做法,永远不应该这样做,所以我建议处理状态中的数据,如下所示:
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;
可能这个确切的代码不起作用,但这里的想法是将数据存储在本地状态中,并在单击项目时修改该状态数据的“isFollowed”值。