使用 Hooks 与 React Native 一起返回时刷新屏幕 A答案

【问题标题】：Refresh Screen A when goBack with React Native using Hooks使用 Hooks 与 React Native 一起返回时刷新屏幕 A
【发布时间】：2020-04-11 14:10:21
【问题描述】：

我有一个简单的疑问，希望有人可以帮助我。我有一个简单的应用程序，它有一个主屏幕，其中加载了我从 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>
    );
}

【问题讨论】：

你能显示addDataToDatabase方法的代码吗？您是否在该方法中执行任何应该等待的异步任务？
是的！它使所有异步，查询将返回一个承诺export const addDataToDatabase = async (date) => { let db = new DB(); let newData = await lista.getAllData(date); return newData; }
我的意思是addDataToDatabase 我认为你使用的方法是getDataFromApi
您应该考虑将addDataToDatabase 标记为异步，并在调用它时为其添加await 关键字await addDataToDatabase()
抱歉，编码后的 17 小时让我有点累了哈哈哈这是代码：async function getDataFromApi(date) { let list = []; return new Promise ((resolve, reject) => db.transaction(tx => { tx.executeSql(select * from tasks where date_execution = ?,[date], (_, { rows }) => { for(var i = 0; i < rows.length; i++) { list.push(rows.item(i)); } resolve(list); }) })); }

标签： javascript reactjs react-native react-native-android react-navigation

【解决方案1】：

如果您使用的是 reactnavigation，那么您可以订阅导航生命周期

 React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
  // Screen was focused
  // Do something
});

    return unsubscribe;
  }, [navigation]);

https://reactnavigation.org/docs/navigation-lifecycle

【讨论】：

【解决方案2】：

我已通过杀死组件以转到 ScreenB 来修复此错误，我只使用 props.navigation.replace('ScreenB') insted 使用 navigate。所以，当我回到 ScreenA 时，它只是再次加载 ScreenA。就像第一次一样。并且在goBack()我做的一样，把数据添加到数据库后改回replace('ScreenA')。

【讨论】：

这不是解决问题的方法。就像你只是在解决问题而不是解决它。