无法从实时数据库 Firebase 中迭代子节点？

Question

我试图从我的数据库中获取一个嵌套的孩子，这是一个结构

我想从 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>
)}
}

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;

控制台

Answer 1

问题似乎在这里：

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

let images = []; 位于您的 forEach 循环内，因此每次迭代时它总是只会保存 1 个图像。尝试在循环之外声明图像数组，并在退出循环后声明setState。你想做更多类似的事情：

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

Answer 2

forEach 用于Arrays 而不是Objects

如果你想通过那个对象循环，你必须这样做：

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。