在DetailFamilyScreen中并按下ListItem时,其他家庭成员将移动到具有不同参数的同一DetailFamilyScreen 在DetailFamilyScreen上时如何切换到DetailFamilyScreen页面
const DetailFamilyScreen = ({ navigation }) => {
const item = navigation.state.params.item;
const [loading, setLoading] = useState(false);
const [result, setResult] = useState([]);
const getResult = async id => {
setLoading(true)
const response = await server.get(`/person/${item._id}`)
.then((response) => {
setResult(response.data);
console.log(response.data)
setLoading(false)
}, (error) => {
console.log(error);
});
};
useEffect(() => {
getResult();
}, []);
return (
<View style={styles.container}>
<Button title='Add Member' onPress={() => {navigation.navigate('AddPerson', { item:item })}} />
<FlatList
showsVerticalScrollIndicator={false}
data={result}
keyExtractor={(person) => person._id}
renderItem={({ item }) => {
return (
<ListItem
title={item.name}
subtitle={item._id}
bottomDivider
chevron
onPress={() => navigation.navigate('DetailFamilyScreen', { item:item })}
/>
);
}}
/>
</View>
);}
答案 0 :(得分:0)
如果我了解您要正确执行的操作,则认为更新您的状态而不是调用导航更为有意义。
因此您可以执行以下操作:
const DetailFamilyScreen = ({navigation, route}) => {
const [item, setItem] = useState(route.params?.item);
useEffect(() => {
getResult();
}, [item]);
// ...
onPress={() => {
setItem(item);
}}
// ...
如果需要,您还可以设置默认值:
route.params?.someParam ?? {name: "test", etc...};
因此组件将重新渲染新项目,而您的getResult
将使用新项目来设置result
。
答案 1 :(得分:0)
不确定真正要做什么,但是如果要使用新参数导航到同一屏幕,则必须使用navigation.push而不是navigation.navigate(https://reactnavigation.org/docs/navigating/)。