React Native - 在 Firebase 实时数据库中更新然后导航不等待

Question

我正在使用 Firebase 实时数据库作为后端，使用 React Native 开发一个应用程序。

在“编辑”屏幕上，我有一个表单可以在按下提交按钮时更新数据（以特定 ID 显示）。保存后，它会立即导航到该项目的“详细信息”屏幕 (react-navigation)。

详细信息屏幕从 Firebase 中提取数据并显示刚刚编辑的项目的详细信息。

问题是它保存了，但过早进入了详细信息屏幕（尽管导航在 then 语句中）。因此，当涉及到详细信息时，它具有旧信息，除非我完全退出并再次查看详细信息屏幕。下面是名为 onSubmit 的函数：

const saveExisting = (data) => {
    Firebase.database()
        .ref("users/" + user.uid + "/items/" + itemId)
        .set(data, function (error) {
            if (error) console.log("Error saving existing item");
            else console.log("Item Updated");
        })
        .then(navigation.navigate("Details", { id: itemId }));
};

详细信息屏幕然后从 Firebase 中提取数据，如下所示。注意：我拉的不仅仅是标题，而是为此进行了简化 post。当仅使用标题进行测试时，我遇到了同样的问题（显示更新前的标题）。

const [title, setTitle] = useState("");
useEffect(() => {
    Firebase.database()
        .ref("users/" + user.uid + "/items/" + id)
        .get()
        .then((snapshot) => {
            if (snapshot.exists()) {
                
                snapshot.val().name && setTitle(snapshot.val().name);
                
            } else {
                console.log("No data found");
            }
        })
        .catch((error) => {
            console.log("error: " + error);
        });
}, []);

Answer 1

我不确定为什么服务器上的更新还没有完成，但总的来说我建议使用 onSnapshot 而不是获取。

当您使用 get() 时，您明确告诉 SDK 检查服务器上的值，在这种情况下，这似乎是由于（不可否认的）竞争条件而出现问题的地方.

通过使用 onSnapshot，您将：

获取值的本地估计值，一旦 set 调用 returns（甚至在 promise 解析并调用 then 之前），它就会正确。
即使你暂时在某处获取过期值，它也会在服务器通知 SDK 更新后立即更新。

React Native - 在 Firebase 实时数据库中更新然后导航不等待

React Native - Update in Firebase Realtime Database then navigate is not waiting

javascript

react-native

firebase-realtime-database

react-navigation-stack