FlatList не рендерит данные с реквизита

Question

У меня есть объект массива, переданный из моего родительского компонента, с именем data, когда вызывается мой дочерний компонент, я проверяю, были ли пропущены реквизиты в componentWillMount с console.log(this.props.data).Я вижу это в консоли (что правильно):

Затем я установил простой FlatList, чтобы посмотреть, можно ли передавать данные,но мой экран остается пустым:

render() {
        return (
            <View>
                <FlatList
                    data={this.props.data}
                    renderItem={({item}) => <Text>{item.videoURL}</Text>}
                />
            </View>
        );
    }

Учитывая, как объект данных представляется в FlatList, таким образом я должен использовать renderItem для получения правильных данных из элемента?Или чего мне не хватает?Спасибо

РЕДАКТИРОВАТЬ, больше контекста кода:

class VideoFeed extends React.Component {
    constructor(props) {
        super(props);
        //this.dataRef = database.ref("music");
        this.state = {
            data: this.props.data,
        }
    }

    componentWillMount() {
        console.log(this.state.data);
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.data}
                    renderItem={({item}) => <Text>{item.videoURL}</Text>}
                />
            </View>
        );
    }

}

class Home extends React.Component {
    constructor() {
        super();
        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() {
        const { navigate } = this.props.navigation;
        return (
          <View style={styles.videoFeedContainer}>
            <VideoFeed data={this.state.itemList}/>
          </View> 
        );
    }
}

теперь я получаю сообщение об ошибке еще до этого, с `` не могу прочитать свойства 'data' из неопределенного 'я получаю это при попытке изменить изреквизит, чтобы заявить.

Answer 1

Измените renderItem от вашего FlatList используйте это:

renderItem={({item}) => ( <Text>{item.videoURL}</Text> )}

Добавление паранеза вернет результат функции, иначе у вас не будет возврата в функции.