实时数据库的结果在调用时不可用

Question

我在使用实时数据库和 React Native 时遇到了一些问题。我在一个组件中有以下 useEffect，它应该监听更改然后根据需要更新状态，然后我使用该状态填充列表。

该组件获取作为道具传递的数据对象，该数据对象包含一个名为 members 的字符串数组，其中包含 uuid，我正在尝试迭代这些以从实时数据库中获取附加用户，然后将这些对象保存到状态数组。

const myComponent = ({ data }) => {
 const [users, setUsers] = useState([]);
 
 useEffect(() => {
            const userArr = [];
            data.map(item => {
                item.members.forEach((username: string) => {
                    database()
                        .ref(`users/${username}`)
                        .on('value', snapshot => {
                            userArr.push(snapshot.val());
                        });
                });
            });
            setUsers(userArr);
        };
    }, []);

return (
  <>
   {users} <-----  this is in a flatlist
  </>
 );
}

刷新屏幕5次左右后终于生效了。任何帮助将不胜感激。

Answer 1

您的数据库调用可能是异步的，这导致 useEffect 中的代码表现得有点滑稽。您可以将所有这些数据库调用（同时遍历 item.members）放入一个数组，然后对数组执行 Promise.all。一旦承诺得到解决，您就可以设置用户了。

希望对您有所帮助！

Answer 2

显示一些数据的最简单方法是在向数组添加项目后立即移动更新状态：

useEffect(() => {
  const userArr = [];
  data.map(item => {
      item.members.forEach((username: string) => {
          database()
              .ref(`users/${username}`)
              .on('value', snapshot => {
                  userArr.push(snapshot.val());
                  setUsers(userArr); // 
              });
          });
      });
  };
}, []);

现在，每次从数据库加载用户时，UI 都会更新。

我还建议阅读更多有关异步加载的内容，例如 Why Does Firebase Lose Reference outside the once() Function?

Answer 3

在 useEffect 中添加一个异步函数并调用它

useEffect(() => {
    const getUsers = async () => {
       const userArr = [];
       data.....
     
       //wait for it with a promise
       Promise.all(userArr).then(array => setUsers(array))
    })
   getUsers()
}, [])

不确定函数是否需要异步

实时数据库的结果在调用时不可用

Results from realtime db not available when called

firebase

reactjs

react-native

firebase-realtime-database

use-effect