我正在使用 React Native 0.49。我从 firebase 中获取了数据,用户列表users/
,这个列表中的每一项都是这样设置的firebase.database().ref('users/' + userId).set(userInfo)
用户 ID 是uid
当前用户的。
现在我正在取回(在操作中 - redux):
export function getPeople(){
return (dispatch) => {
dispatch(getPeopleRequest());
getData().then(result => {
dispatch(getPeopleSuccess(result.val()))
})
.catch(error => {
dispatch(getPeopleFailure(error))
});
}
}
const getData = () => {
const userRef = firebase.database().ref('users/').limitToFirst(20);
return userRef.once('value');
}
在组件中,我试图渲染 FlatList 中的数据,但它没有渲染任何内容,我不知道我做错了什么:
componentDidMount(){
this.props.getPeople();
}
_renderItem = ({ item }) => (
<View style={{flex: 1}}>
<Text>{item}</Text>
</View>
);
render(){
const { inProgress, people, error } = this.props.peopleData;
return (
<FlatList
data={people}
renderItem={this._renderItem}
/>
);
}
当控制台记录people
这是结果:{cpycwkz7exVBzmhaLEtHjMW66wn1: {…}, UbIITfUANmb63cYE2x7dZRZ0pfK2: {…}}
FlatList
组件期望其data
prop 是一个数组。您将其作为对象传递。您可以将其更改为对象数组。那么也在你的_renderItem
方法item
将是一个对象,并且不能立即渲染<Text>
,您必须从项目对象中提取文本值,然后将其呈现为:<Text>SOME_TEXT_NOT_AN_OBJECT</Text>
您可以将 people 对象转换为数组并将其传递给<FlatList
像这样:
render(){
const { inProgress, people, error } = this.props.peopleData;
let ArrayOfPeopleObject = Object.values(people)
return (
<FlatList
data={ArrayOfPeopleObject}
renderItem={this._renderItem}
/>
);
}
现在每个item
in the _renderItem
方法将是一个对象,您可以从任何键中提取值并将其呈现在<Text>
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)