React来自firestore的Native fecth数据，然后分派不工作的dispatch空数组

Question

我正试图开发我的第一个React Native应用程序，但我对从firestore存储/获取数据感到困惑。

问题是，在从firestore获取所有数据之前进行调度，所以我的filteredProfiles数组是空的，屏幕中的平面列表也是空的。

我应该修改什么？如果有人能帮助我，我将不胜感激。。谢谢

这是我屏幕上的代码：

ProfilesListScreen.js

const ProfilesListScreen = props => {   
const connectedUser = useSelector(state => state.profiles.user); 
const filteredProfiles = useSelector(state => state.profiles.filteredProfiles)
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchProfiles()); 
}, [dispatch]);

我的个人资料我的商店中的Action.js:

export const fetchProfiles= () => {

const loadedProfiles = [ ];
return async dispatch => {               

await firebase.firestore().collection('users')
.get()
.then((profileSnapShot) => {            
profileSnapShot.forEach((doc) => {               
const firstname=  doc.get("firstname");
const birth = doc.get("birth");
const age = getAge(birth.seconds);
const sex = doc.get("sex");                 
const newProfile= new profile(doc.id, firstname,age, "https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");

loadedProfiles.push(newProfile); 


}); 
})
dispatch({ type: SET_PROFILESLIST, profilesList: loadedProfiles } ) ;

};

和我的减速器配置文件.js

case SET_PROFILESLIST:
const newProfilesList = action.profilesList;
return { 
filteredProfiles : newProfilesList,
};

Answer 1

尝试更新fetchProfiles的代码，如下所示，这可能会帮助您解决问题。

export const fetchProfiles= () => {
const loadedProfiles = [];
return async dispatch => {               
const profileSnapShot = await firebase.firestore().collection('users').get()
profileSnapShot.forEach((doc) => {               
const firstname=  doc.get("firstname");
const birth = doc.get("birth");
const age = getAge(birth.seconds);
const sex = doc.get("sex");                 
const newProfile= new profile(doc.id, firstname,age, "https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
loadedProfiles.push(newProfile); 
});
dispatch({ type: SET_PROFILESLIST, profilesList: loadedProfiles });
}
};