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 中提取数据，如下所示。注意：我不仅仅是标题，而是为这篇文章简化了。仅使用标题进行测试时，我遇到了同样的问题（在更新之前显示标题）。

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。

当您使用 get() 时，您明确告诉 SDK 检查服务器上的值，在这种情况下，由于（诚然不清楚）竞争条件，这似乎是问题所在。

通过使用onSnapshot，您将：

1. 获取该值的本地估计值，这将在 set 调用返回后立即正确（甚至在 promise 解析并调用 then 之前）。
2. 即使您暂时在某处获取过时的值，它也会在服务器通知 SDK 更新后立即更新。