Javascript 反应本机-更新导航屏幕组件之间的状态

我是个新来的土生土长的人，我遇到了一个我似乎无法克服的问题，尽管从表面上看，这个问题似乎很简单。我正在开发一个应用程序，利用谷歌API定位服务和react导航

我在stackNavigator中有两个组件。组件A持有位置状态，我希望组件B（这是一个使用异步API调用的地理位置选择器屏幕）根据用户选择生成位置数据，并将此数据推送到组件A并更新其状态

我的问题在于更新组件A的状态，因为从B返回的对象是未定义的

希望有善良的灵魂能帮忙

//COMPONENT A
    const [location, setLocation] = useState({})
    useFocusEffect(useCallback(
        () => {
                const getNewLocation = () => {
                    const location = {
                        name: props.navigation.getParam('name'),
                        latitude: props.navigation.getParam('latitude'),
                        longitude: props.navigation.getParam('longitude')
                    }
                    return location
                }
                setLocation(getNewLocation())

        }, []
    ))
    return (
        <ScrollView style={style.homeContainer}>{location.name}</ScrollView>
    )


//COMPONENT B
    const handleLocationSelect = async (text) => {
        const coordsObject = await getCoordsFromString(text)
        const {results: [{geometry: {location: {lat: latitude, lng: longitude}}}]} = coordsObject
        props.navigation.navigate('Home',
            {
                name: text,
                latitude: latitude,
                longitude: longitude
            }    
        )
    }

    return (
        <ScrollView style={style.container}>
            <Text style={style.header}>Choose a location - more coming soon!</Text>
            <TouchableOpacity
                onPress={() => handleLocationSelect('Brighton, UK')}>
                <Text style={style.location}>Brighton</Text>
            </TouchableOpacity>
.......................................
.......................................
        </ScrollView>

//组件A
const[location，setLocation]=useState（{}）
UseFocuseEffect（useCallback(
() => {
const getNewLocation=（）=>{
常数位置={
名称：props.navigation.getParam（'name'），
纬度：props.navigation.getParam（“纬度”），
经度：props.navigation.getParam（'经度'）
}
返回位置
}
setLocation（getNewLocation（））
}, []
))
返回(
{location.name}
)
//B部分
const handleLocationSelect=异步（文本）=>{
const coordsObject=await getCoordsFromString（文本）
const{results:[{geometry:{location:{lat:lation，lng:longitude}}}]}=coordsObject
道具.导航.导航（'Home'，
{
名称：文本，
纬度：纬度，
经度：经度
}    
)
}
返回(
选择一个位置-更多即将到来！
handleLocationSelect（'Brighton，UK'）}>
布莱顿
.......................................
.......................................

您没有提到组件A是否有路由“Home”，所以我假设它有。为了获得导航道具，您可以使用“Home”中的

useNavigation（）

钩子，即

我不知道为什么需要useFocusEffect和useCallback，它们对于长时间运行的操作非常有用，而您似乎只是同步地传递参数

---

如果你的导航树变大，你可能想考虑使用ReDux来保持一个中心状态。

组件A实际上是主屏幕，它确实有导航道具：我使用UpFixSuffEffor，因为它是我唯一能找到如何改变一些文本（从更新状态中得到的）的方法。当我从组件B导航回这个屏幕时。希望我说的有道理。如果它确实有导航道具，问题是什么？为了清楚起见，当您使用navigation.navigate（）时，您并没有真正向后移动，而是在堆栈中添加一个新屏幕。在组件a中，属性返回时未定义，但是当我在B中记录所有内容时，属性被正确填充。。我不确定这是否与我正在从B进行异步调用有关

const nav = useNavigation();
const location = nav.getParam("location");