Javascript Can';从实时数据库firebase迭代子级?

Javascript Can';从实时数据库firebase迭代子级?,javascript,reactjs,firebase,react-native,firebase-realtime-database,Javascript,Reactjs,Firebase,React Native,Firebase Realtime Database,我试图从我的数据库中得到一个嵌套的子对象这是一个结构 我想从Gallery对象获取URI 当我登录时,我可以在控制台中看到这一点 下面是一个代码: componentWillMount() { const { gKey } = this.state; firebase .database() .ref(`providers/${gKey}`) .once("value") .then(async snapsh

我试图从我的数据库中得到一个嵌套的子对象这是一个结构

我想从Gallery对象获取URI 当我登录时,我可以在控制台中看到这一点

下面是一个代码:

componentWillMount() {
    const { gKey } = this.state;
    firebase
      .database()
      .ref(`providers/${gKey}`)
      .once("value")
      .then(async snapshot => {
        let aboutMe = snapshot.val().aboutMe;
        let uri = snapshot.val().galary;
        await this.setState({ aboutMe });
        console.log(uri);
        uri.forEach(childNodes => {
          console.log(childNodes); // I Got Error here
        });
      });
}
我犯了一个错误

uri.forEach不是一个函数

更新 我在父“库”中获得了所有URI,并将其设置在数组中,然后将其作为道具传递到组件中,现在在该组件中,并以“我只看到一个主题图像”的形式渲染它

父屏幕

Class Parent extend Component{
constructor(props){
super(props)
 this.state={
        ...
        images:[], 
        aboutMe:""
        ...
}


    componentWillMount() {
    const { gKey } = this.state;
    firebase
      .database()
      .ref(`providers/${gKey}`)
      .once("value")
      .then(async snapshot => {
        let aboutMe = snapshot.val().aboutMe;
        let uri = snapshot.val().galary;
        await this.setState({ aboutMe });
        Object.values(uri).forEach(childNodes => {
          let images = [];
          images.push({
            uri: childNodes.uri
          });
          this.setState({ images });
        });
      });
}

render(){
return(
<View>
....
<GalaryScreen images={this.state.images} />
....
</View>
)}
}
类父扩展组件{
建造师(道具){
超级(道具)
这个州={
...
图像:[],
关于我:“
...
}
组件willmount(){
const{gKey}=this.state;
火基
.数据库()
.ref(`providers/${gKey}`)
.一次(“价值”)
。然后(异步快照=>{
让aboutMe=snapshot.val().aboutMe;
让uri=snapshot.val().galary;
等待这个.setState({aboutMe});
Object.values(uri).forEach(childNodes=>{
让图像=[];
图像推送({
uri:childNodes.uri
});
this.setState({images});
});
});
}
render(){
返回(
....
....
)}
}

Galary.js

class GalaryScreen extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 20, padding: 10, color: "#000" }}>Galary</Text>
        <FlatList
          horizontal
          key={Math.floor(Math.random() * 1000)}
          data={this.props.images}
          renderItem={({ item }) => {
            console.log(item.uri); // I can see every url here and all of them is a vaild URL 
            return (
              <View style={{ margin: 10 }}>
                <Image
                  key={Math.floor(Math.random() * 100)}
                  style={{ width: 100, height: 100 }}
                  source={{ uri: item.uri }}
                />
              </View>
            );
          }}
          keyExtractor={(item, index) => item.key}
        />
      </View>
    );
  }
}

export default GalaryScreen;
class GalaryScreen扩展组件{
建造师(道具){
超级(道具);
}
render(){
返回(
加拉里
{
console.log(item.uri);//我可以在这里看到每个url,它们都是有效的url
返回(
);
}}
keyExtractor={(项,索引)=>item.key}
/>
);
}
}
导出默认屏幕;
控制台


forEach用于
数组
而不是
对象

如果要循环该对象,必须执行以下操作:

Object.values(uri).forEach(childNodes=>{
   console.log(childNodes); 
});
编辑

forEach
arrays
独有的,从未对对象可用

如果您过去能够执行uri.forEach,那么服务器端会发生一些变化,现在返回一个对象而不是数组

解释我的代码:

Object.values返回该对象内所有值的数组 例如:

const obj={a:"1",b:"2"}
Object.values(obj) .  //returns [ "1" , "2"]

在那之后做了一个forEach,就像你以前的代码一样

问题似乎在这里:

Object.values(uri).forEach(childNodes=>{
让图像=[];
图像推送({
uri:childNodes.uri
});
this.setState({images});
});

let image=[]
在您的
forEach
循环中,因此每次迭代它总是只保存一个图像。尝试在循环外部声明图像数组,并在退出循环后设置状态。您想做一些更像:

let images=[]
Object.values(uri.forEach(childNodes=>{images.push({uri:childNodes.uri});});
this.setState({images});

你能检查一下更新吗,@AuticcatHey,我又有一个Promise对象如何获取它们的特定值@Auticcat,你能为获取数据的组件添加代码,然后将其传递给GalaryScreen组件吗?再次检查,@treyeckelsyes,我已经做了,但这是我的错,我忘了添加它`让图像=[]'并将每个图像推送到这些,如果你在galary控制台中看到,我可以看到每个URI。你可以在控制台中看到每个URI,因为状态每次都会更改,所以库代码每次都呈现,控制台代码每次都运行。画廊中的图像也在不断变化,但变化太快,以至于你看不到它。你能给我们看一下带有
let images
的代码,以及你把它放在哪里吗?检查它agian@TreyEckels
let images=[]
位于forEach循环中,因此每次迭代时它总是只保存一个图像。尝试在循环外部声明images数组,并在退出循环后设置state。您希望执行类似的操作:
let images=[]Object.values(uri.forEach(childNodes=>{images.push({uri:childNodes.uri});});this.setState({images})