это расширение более раннего вопроса, теперь отлаженного, чтобы понять, что это другая проблема. У меня есть массив объектов, который выглядит следующим образом при входе в консоль:
Теперь я хочу использовать этот массив объектов для отображения списка с использованием компонента FlatList. в конструкторе состояний я установил переменную itemList, которая принимает объекты, сгенерированные из моей функции listenForMusic, используя this.setState():
class VideoFeed extends React.Component {
constructor(props) {
super(props);
//this.dataRef = database.ref("music");
this.state = {
itemList: null,
}
}
componentWillMount() {
this.listenForMusic();
}
listenForMusic(){
var dataRef = database.ref("music");
let items = [];
dataRef.orderByChild("date").on('child_added', (snap) => {
items.push({
videoURL: snap.val().youtubeURL,
title: snap.val().title,
thumbnail: snap.val().thumbnail
});
});
this.setState({ itemList: items })
}
render() {
console.log(this.state.itemList);
return (
<View>
<FlatList
data={this.state.itemList}
renderItem={({item}) => { console.log(item); return (<Text>{item.videoURL}</Text>) }}
/>
</View>
);
}
}
У меня есть этот console.log в моей функции рендеринга, и я вижу изображение, которое я разместил выше, но когда я пытаюсь и console.log item в renderItem, он ничего не показывает в консоли (не даже пустой массив). Куда делись мои данные, которые я отправил в data реквизит?
Должно быть очевидно, но в этом теге <Text> ничего не напечатано.
РЕДАКТИРОВАТЬ: весь класс добавлен
class VideoFeed extends React.Component {
constructor(props) {
super(props);
//this.dataRef = database.ref("music");
this.state = {
itemList: null,
}
//this.listenForMusic = this.listenForMusic.bind(this);
}
componentWillMount() {
this.listenForMusic();
}
listenForMusic(){
var dataRef = database.ref("music");
let items = [];
dataRef.orderByChild("date").on('child_added', (snap) => {
items.push({
videoURL: snap.val().youtubeURL,
title: snap.val().title,
thumbnail: snap.val().thumbnail
});
});
this.setState({ itemList: items })
}
_keyExtractor = (item, index) => item.id;
_renderVideoItem = ({item}) => (
<TouchableWithoutFeedback
onPress={Actions.Submit}
>
<View style={styles.mediaContainer}>
<Image
source={{uri: item.thumbnail }}
style={styles.mediaThumbnail}
/>
<View style={styles.mediaMetaContainer}>
<View style={styles.topMetaContainer}>
<Text style={styles.mediaTitle}>
{item.title}
</Text>
<Text style={styles.sharedByUser}>
UNCVRD
</Text>
</View>
<View style={styles.bottomMetaContainer}>
<Icon
name='youtube-play'
type='material-community'
color='#ff0000'
size={16}
/>
<View style={styles.bottomRightContainer}>
<Icon
name='thumb-up'
size={12}
color='#aaa'
/>
<Text style={styles.metaLikeCounter}>
16
</Text>
</View>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
render() {
console.log(this.state.itemList);
return (
<View>
<FlatList
data={this.state.itemList}
renderItem={({item}) => { console.log(item); return (<Text>{item.title}</Text>) }}
/>
</View>
);
}
}
РЕДАКТИРОВАТЬ 2: Итак, я сделал интересный тест, я сделал две переменные состояния: realList и fakeList:
state = {
realList: [],
fakeList: [],
}
Затем, когда страница загрузится, запускается следующая функция, которая заполняет массивы с именами real и fake. Один с данными, полученными из Firebase, другой жестко запрограммирован с информацией о массиве:
listenForMusic = () => {
var dataRef = database.ref("music");
let real = [];
let fake = [];
dataRef.orderByChild("date").on('child_added', (snap) => {
var url = snap.val().youtubeURL;
var vidTitle = snap.val().title;
var thumb = snap.val().thumbnail;
real.push({
videoURL: url,
title: vidTitle,
thumbnail: thumb
});
});
fake.push({videoURL: "https://youtu.be/AHukwv_VX9A", title: "MISSIO - Everybody Gets High (Audio)", thumbnail: "https://i.ytimg.com/vi/AHukwv_VX9A/hqdefault.jpg"}, {videoURL: "https://youtu.be/G-yWpz0xkWY", title: "SMNM - Million ft. Compulsive", thumbnail: "https://i.ytimg.com/vi/G-yWpz0xkWY/hqdefault.jpg"});
this.setState({
realList: real,
fakeList: fake
});
}
Затем я console.log оба массива после функции рендеринга, и я вижу это:
И открытие обоих:
Итак, мой вопрос: почему «реальный» массив выглядит пустым, но все еще содержит данные, заполненные внутри, в то время как «поддельный» массив показывает, что он содержит два объекта внутри него, даже прежде чем мы заглянем внутрь ??