我使用 FlatList 進行資料顯示，也使用組件進行顯示。
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={postList}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
refreshing={refreshing}
onRefresh={_onRefresh}
/>
const renderItem = (item) => {
return(
<FeedMainStoryCard
feedTittle={item.item.feedTittle}
feedimage={item.item.feedImage}
isUserLike={item.item.isLike}
/>
)
}
這是 FeedMainStoryCard.js 檔案
<TouchableOpacity
onPress={onPressHeart}
>
<Ionicons name={props.isUserLike === true ? "ios-heart-sharp" : "ios-heart-outline"} />
</TouchableOpacity>
那么如何更改 OnPress 方法上的 isUserLike 值（如 true 和 false），然后更改<Ionicons name={props.isUserLike === true ? "ios-heart-sharp" : "ios-heart-outline"} />圖示。
請提出任何解決方案。
uj5u.com熱心網友回復：
你不應該改變傳遞的道具。您應該改為使用狀態 - 可以在此處閱讀更多內容：https : //github.com/uberVU/react-guide/blob/master/props-vs-state.md。
例如，您可以將道具傳遞給 useState 并切換此值：
const Liker = ({ isUserLiked }) => {
const [isLiked, setIsLiked] = useState(isUserLiked);
const _onPressHeart = () => setIsLiked(!isLiked);
return (
<TouchableOpacity onPress={_onPressHeart}>
<Ionicons
name={isLiked ? 'ios-heart-sharp' : 'ios-heart-outline'}
size={30}
/>
</TouchableOpacity>
);
};
您可以在此處找到完整的作業示例：https : //snack.expo.dev/@tnr_c/liker
uj5u.com熱心網友回復：
如果 isUserLike 已經是一個布林值，它就足夠了：prop.yourBoolean如果你想檢查它的真否則：!prop.yourBoolean
第一： 組件不能更新它自己的 props，除非它們是陣列或物件（即使可能，讓組件更新它自己的 props 是一種反模式），但可以更新它的 state 和它的孩子的 props。
第二： 您可以將其添加到子狀態并更新其值：
const [isUserLike, setIsuserLike] = useState(props.isUserLike);
const onPressHeart = () => {
setIsuserLike(!isUserLike);
};
<TouchableOpacity
onPress={onPressHeart}>
<Ionicons name={isUserLike ? "ios-heart-sharp" : "ios-heart-outline"} />
</TouchableOpacity>
演示： codesandbox.io/s/boring-mcclintock-vhj4c?file=/src/App.js
您可以在此處找到更多資訊：https : //es.reactjs.org/docs/state-and-lifecycle.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/392315.html
上一篇：ReactNative：FlastList中的一個簡單資料表，如何為每個專案獲取唯一的資料表？
下一篇：我如何將以下代碼類轉換為函陣列件