React 中的 Firebase 查询 - 我可以登录到控制台，但不能在组件中使用

Question

我想在这个组件中看到用户的照片。

我可以看到每个用户的id，所以database.getUserList函数有效！但是getAdditionalUserInfoById功能有问题。

import { database } from "../firebase";
class UsersInfo extends Component {
render() {
let users = database.getUserList(this.props.id);
return (
<div>
<List>
{Object.keys(users).map(key => (
<ListItem>
<Avatar>
<ImageAvatars
photoUrl={database.getAdditionalUserInfoById(
users[key]["userId"],
"photoUrl"
)}
/>
</Avatar>
<ListItemText
primary={users[key]["userId"]}
secondary="Jan 9, 2014"
/>
</ListItem>
))}
</List>
</div>
);
}
}

我在另一个查询火碱的文件中getAdditionalUserInfoById。使用此console.log命令，我可以在控制台中看到每个用户的正确photoUrl值，但在上面的组件中它是undefined.我怎样才能让它UsersInfo组件，这里应该修复什么？

export const getAdditionalUserInfoById = (userId, query) => {
var userDbRef = database.ref("users/" + userId);
userDbRef
.child("additionalInfo")
.child(query)
.on("value", function(snapshot) {
console.log("userInfoById: ", snapshot.val());
return snapshot.val();
});
};

Firebase DB 结构：

"users" : {
"h06c4wAxn0eeN3yQ4Qw9DfEVww03" : {
"additionalInfo" : {
"photoUrl" : "https://thumb.ibb.co/iVW1y9/Screen_Shot_2018_05_10_at_12_23_59_PM.jpg"
}
}
}

*****更新*****

class InfoWindowContent extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
userPhotos: []
};
}
componentDidMount() {
this.setState({ users: database.showUserListbyGeoId(this.props.id) });
var userPhotos = [];
Object.keys(this.state.users).map(function(key) {
userPhotos[
this.state.users[key]["userId"]
] = database.getAdditionalUserInfoById(
this.state.users[key]["userId"],
"photoUrl"
);
});
this.setState({ userPhotos });
}
render() {
const { users, userPhotos } = this.state;
return (
<div>
<List>
{Object.keys(users).map(key => (
<ListItem>
<Avatar>
<ImageAvatars
photoUrl={this.state.userPhotos[users[key]["userId"]]}
/>
</Avatar>
<ListItemText
primary={users[key]["userId"]}
secondary={"31 Dec, 2035"}
/>
</ListItem>
))}
</List>
</div>
);
}
}

我的 Firebase 数据库函数

// ../firebase.js
export const showUserListbyGeoId = cityId => {
var userList = [];
var cityUserListRef = database.ref("cities/" + cityId + "/users");
cityUserListRef.orderByChild("userId").on("value", function(snapshot) {
if (snapshot.exists()) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key;
userList[key] = childSnapshot.val();
});
}
});
return userList;
};
export const getAdditionalUserInfoById = (userId, query, callback) => {
var userDbRef = database.ref("users/" + userId);
userDbRef
.child("additionalInfo")
.child(query)
.on("value", snapshot => {
return callback(snapshot.val());
});
};

Answer 1

database.getUserList是异步函数。您必须等待数据返回。 解决方案是在组件中定义一个状态。返回数据后，您将setState，视图将更新。

我不知道你database.getUserList使用回调或Promise.如果它返回Promise，则示例如下：

class UsersInfo extends Component {

constructor(props) {
super(props);
this.state = { users: [] };
}
componentDidMount() {
database.getUserList(this.props.id)
.then((results) => {
this.setState({ users: results });
});
}

public render() {
const users = this.state.users;
...
}
}

对于getAdditionalUserInfoById，因为它是事件侦听器，所以可以使用回调

export const getAdditionalUserInfoById = (userId, query, callback) => {
var userDbRef = database.ref('users/' + userId);
userDbRef.child("additionalInfo").child(query).on("value", (snapshot) => {
callback(snapshot.val());
});
})
}

componentDidMount() {
const self = this;
getAdditionalUserInfoById(userId, query, (value) => {
// set state or do something
self.setState({ user: value })
})
}

更新：

// ../firebase.js
export const showUserListbyGeoId = (cityId, callback) => {
const userList = [];
const cityUserListRef = database.ref("cities/" + cityId + "/users");
cityUserListRef.orderByChild("userId").on("value", (snapshot) => {
if (snapshot.exists()) {
snapshot.forEach((childSnapshot) => {
userList.push(childSnapshot.val());
});  
}
return callback(userList);
});
};
export const getAdditionalUserInfoById = (userId, query) => {
var userDbRef = database.ref("users/" + userId);
return userDbRef
.child("additionalInfo")
.child(query)
.once("value")
.then((snapshot) => ({
[query]: snapshot.val(),
userId,
}));
};

class InfoWindowContent extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
userPhotos: []
};
}
componentDidMount() {
const self = this;
database.showUserListbyGeoId(this.props.id, (userList) => {
self.setState(userList);
return Promise.all(
userList.map(({ userId }) => database.getAdditionalUserInfoById(
userId,
"photoUrl"
))
).then((userPhotos) => {
self.setState({ userPhotos })
});
});
}
render() {
const { users, userPhotos } = this.state;
return (
<div>
<List>
{userPhotos.map((photo) => (
<ListItem>
<Avatar>
<ImageAvatars
photoUrl={photo.photoUrl}
/>
</Avatar>
<ListItemText
primary={photo.userId}
secondary={"31 Dec, 2035"}
/>
</ListItem>
))}
</List>
</div>
);
}
}