我试图从数据库中获取一个嵌套的孩子,这是一个结构
我想从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;
控制台
答案 0 :(得分:1)
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。
答案 1 :(得分: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 });