我有兩個獨立的資料陣列，第一個陣列是資料庫中資料的完整串列，第二個陣列是用戶收藏的資料。我在螢屏上的 Flatlist 中輸出第一個陣列，如果用戶收藏了該串列中的一個專案，它將將該專案中的資料保存到收藏夾陣列并顯示在不同的螢屏上。我有一個圖示，我需要根據該專案是否被收藏來填充或勾勒（如果收藏，則填充，如果不是，則勾勒）。我不確定解決這個問題的最佳方法。我目前正在嘗試比較每個陣列是否包含相同的 ID。此外，我嘗試使用 setState 作為圖示，但如果 ID 匹配，它會將平面串列中的每顆心都設定為填充。這就是我目前所擁有的。
list = [
{"id": 0, "firstName": "John", "lastName": "Smith"},
{"id": 1, "firstName": "Frank", "lastName": "White"},
]
favoritesList = [
{"favoritesId": 0, "firstName": "John", "lastName": "Smith"},
{"favoritesId": 1, "firstName": "Frank", "lastName": "White"},
]
//Checking if favorite is checked
let heartOutline = 'heart-outline';
const favOutline = (favId)=> {
favoritesId.forEach(el => {
if (favId === el.favoritesId) {
heartOutline = 'heart';
} else {
heartOutline = 'heart-outline';
}
});
};
<FlatList
data={list}
keyExtractor={item => item.id}
renderItem={({item}) => (
<View>
<Ionicons
onPress={() => favOutline(item.id)}
style={{alignItems: 'center', color: 'white'}}
name={heartOutline}
size={18}
/>
</View>
/>
uj5u.com熱心網友回復：
如果您只想顯示圖示，具體取決于該專案是否是收藏夾。你可以做：
const getIconName = (favId)=> {
const itemFound = favoritesList.find(el => el.favoritesId
=== favId);
return !!itemFound ? 'heart' : 'heart-outline';
};
<Ionicons
onPress={() => favOutline(item.id)}
style={{alignItems: 'center', color: 'white'}}
name={getIconName(item.id)}
size={18}
/>
但是，如果你想在點擊時更新圖示，那么你應該使用 useState 來處理你的串列，并使用一個函式來添加或洗掉點擊到收藏夾串列的專案。像這樣的東西：
const [favoritesList , setFavoritesList ] = useState([
{"favoritesId": 0, "firstName": "John", "lastName": "Smith"},
{"favoritesId": 1, "firstName": "Frank", "lastName": "White"},
]);
const handleClickOnIcon = (item) => {
const index = favoritesList.findIndex(el => el.favoritesId
=== item.id);
//If the item is not a favorite then you add it
if(index === -1)
return setFavoritesList([...favoritesList, item]);
//Removes the item from favoritesList
favoritesList.splice(x, 1);
setFavoritesList([...favoritesList]);
};
<Ionicons
onPress={() => handleClickOnIcon(item)}
style={{alignItems: 'center', color: 'white'}}
name={getIconName(item.id)}
size={18}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486049.html
標籤：javascript 反应 反应式
上一篇：如何在reactnative/typescript中干凈地創建具有不同引數的重復組件？
下一篇：滾動視圖內的for回圈