当使用钩子与React Native一起使用goBack时刷新屏幕A

问题描述 投票:1回答:1

我有一个简单的疑问,我希望有人可以帮助我。我有一个简单的应用程序,它有一个主屏幕,可在其中加载从SQLite数据库获取的所有数据,但是,当我转到“添加到数据库屏幕”并添加一些数据并记录在数据库中时,我使用了一个函数返回上一个屏幕(props.navigation.goBack())。

[不幸的是,当我到达屏幕A时,我的钩子没有'刷新'或更新数据库中的数据。有没有办法让它刷新屏幕A来对数据库进行新的调用并用新数据刷新数据?

ps:要调用数据库,我使用今天的日期来获取查询中的数据,因此我的日期不会更新。

这是我的代码:

ScreenA.js

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenA() {

   const [data, setData] = useState([]);

    useEffect(() => {
        setData(getDataFromApi())
    }, []);

    return(
        <View>
            { apiResponse() }
            <TouchableOpacity onPress={() => { props.navigation.navigate('ScreenB') }}
                <Text>Add data</Text>
            </TouchableOpacity>
        </View>
    )
}

这里是ScreenB.js

import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenB() {

    function goBackToScreenA() {
        addDataToDatabase();
        props.navigation.goBack();
    }

    return(
        <View>
            <TouchableOpacity onPress={() => { goBackToScreenA() }}>
                <Text>Go Back</Text>
            </TouchableOpacity>
        </View>
    );
}
javascript reactjs react-native react-native-android react-navigation
1个回答
0
投票

我已经通过杀死要转到ScreenB的组件来解决此错误,我只是使用props.navigation.replace('ScreenB')插入了navigate。因此,当我返回到ScreenA时,它将再次加载ScreenA。像第一次。然后在goBack()中进行相同的操作,将数据添加到数据库后,用replace('ScreenA')更改返回。

© www.soinside.com 2019 - 2024. All rights reserved.