[英]How to change props value in functional component on onPress
I am using FlatList for data display and also use the component for display.我使用 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}
/>
)
}
And here is FeedMainStoryCard.js file这是 FeedMainStoryCard.js 文件
<TouchableOpacity
onPress={onPressHeart}
>
<Ionicons name={props.isUserLike === true ? "ios-heart-sharp" : "ios-heart-outline"} />
</TouchableOpacity>
So How to change the isUserLike value on OnPress method like true and false and then change in <Ionicons name={props.isUserLike === true? "ios-heart-sharp": "ios-heart-outline"} />
那么如何更改 OnPress 方法上的 isUserLike 值,例如 true 和 false,然后更改
<Ionicons name={props.isUserLike === true? "ios-heart-sharp": "ios-heart-outline"} />
<Ionicons name={props.isUserLike === true? "ios-heart-sharp": "ios-heart-outline"} />
icon. <Ionicons name={props.isUserLike === true? "ios-heart-sharp": "ios-heart-outline"} />
图标。
Please suggest any solutions.请提出任何解决方案。
If isUserLike is already a Boolean it would be enough with: prop.yourBoolean
if you want to check its true otherwise: .prop.yourBoolean
如果 isUserLike 已经是 Boolean 就足够了:
prop.yourBoolean
如果你想检查它的真实性,否则: .prop.yourBoolean
1st: A component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children.第一个:组件不能更新自己的道具,除非它们是 arrays 或对象(让组件更新自己的道具即使可能是反模式),但可以更新其 state 及其子道具。
2nd: You can add it to the children state and update its value in:第二:您可以将其添加到子 state 并在以下位置更新其值:
const [isUserLike, setIsuserLike] = useState(props.isUserLike);
const onPressHeart = () => {
setIsuserLike(!isUserLike);
};
<TouchableOpacity
onPress={onPressHeart}>
<Ionicons name={isUserLike ? "ios-heart-sharp" : "ios-heart-outline"} />
</TouchableOpacity>
DEMO: codesandbox.io/s/boring-mcclintock-vhj4c?file=/src/App.js演示: codesandbox.io/s/boring-mcclintock-vhj4c?file=/src/ App.js
You can find more info here: https://es.reactjs.org/docs/state-and-lifecycle.html您可以在此处找到更多信息: https://es.reactjs.org/docs/state-and-lifecycle.html
You should not be changing the prop thats passed.你不应该改变传递的道具。 You should instead be using states - can read more into this here: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md .
相反,您应该使用状态 - 可以在此处阅读更多内容: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md 。
For example you can pass the prop into a useState and toggle this value:例如,您可以将道具传递给 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>
);
};
You can find the full working example here: https://snack.expo.dev/@tnr_c/liker您可以在此处找到完整的工作示例: https://snack.expo.dev/@tnr_c/liker
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.