反应-本机传递useState到导航屏幕和更新FlatList
我正在尝试使用react导航，并在屏幕之间传递useState，并让它呈现一个平面列表。如果我返回到前一个屏幕，然后返回到评论屏幕，那么它将正确地更新平面列表，同时，只要按下按钮，就不会发生任何事情。
在我的App.js文件中，设置基本上如下所示
....
<Stack.Screen
name="CommentScreen"
component={CommentScreen}
options={{ title: "CommentScreen" }}
initialParams={{ comments: getComments, setComments: setComments }}
/>
....其中的注释来自以下内容：
...
var comments= [
{
comment_id: "1",
post_id: "1",
user: "user",
comment: "comment1"
}
]
const [getComments, setComments] = useState((comments));
...然后，在我的commentScreen.js文件中，我有以下内容，它基本上只是一个平面列表，一个输入字段，带有一个按钮，用一个新的注释更新状态。从App.js传递getter / setter的
export default function CommentScreen({navigation, route}){
const [currentComment, setCurrentComment] = useState("");
const addComment = (message) => {
route.params.setComments(
[...route.params.comments,
{
post_id: route.params.post_id,
comment_id: new_comment_id(),
user: "user1",
comment: message
}
]
);
}
return(
<View style={styles.screenDefault}>
<FlatList
data={route.params.comments}
renderItem={({item}) => Comment({item})}
keyExtractor={item => item.comment_id}
extraData={route.params.comments}
/>
<View style={styles.comment}>
<View style={styles.inputField}>
<TextInput
style={{flex: 1}}
onChangeText={setCurrentComment}
placeholder=" Add comment "
/>
<Button
style={{flex: 1}}
onPress={()=>addComment(currentComment)}
title="Post"
color="gray"
/>
</View>
</View>
</View>
)
}renderItem函数注释在Comment.js中定义如下
export default function Comment({item}){
return(
<View style={styles.item}>
<Text style={styles.title}>
{item.user}
</Text>
<Text style={styles.comment}>
{item.comment}
</Text>
</View>
);
}所以有些事情确实发生了，因为如果我在添加了一个评论之后，它就会出现，但是只要按下按钮，什么都不会发生。谢谢你的帮助！
回答 1
Stack Overflow用户
发布于 2022-10-28 08:33:16
我建议您使用Redux，因为它集中您的应用程序状态。反应-还原
下面是它的工作原理，假设您有一个包含两个主屏幕的应用程序，HomeScreen.js和OptionScreen.js。
1-在HomeScreen.js内部有一个视图组件
2-在OptionScreen.js内部有一个Button组件
如果我们想要根据单击与否更改视图的颜色，使用useState，则必须在包含两个主屏幕的顶级父组件中为该颜色创建一个状态，然后将其传递到Button和View组件，这是非常混乱和复杂的。
这里是Redux发挥作用的地方，我们只需创建一个“状态文件”，并让所需的组件监听它。
Button单击
redux > View中的状态将重新呈现并导致其颜色更改。
https://stackoverflow.com/questions/74214892
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号