Компонент не выполняет повторную визуализацию после отправки формы с использованием маршрутизатора.

Question

У меня есть список видео на моем домашнем экране, запрошенный последними, когда пользователь отправляет видео, оно должно идти вверху списка, но вместо этого оно добавляется в конец списка, пока я не перезапущу приложение. Я считаю, что это происходит потому, что запрос на сортировку по самым последним не выполняется, пока приложение не обновится. Как мне получить мой VideoFeed компонент для повторной визуализации после отправки?

В моем Submit.js страница у меня есть действие reset Главная сцена, которая возвращается к моей Home.js посмотреть, где находится видео канал. getData Функция отправляет сообщение в мою базу данных Firebase:

onSubmit(data) {
    this.setState({error: error}); //clear out error messages
    var submittedLink = data.link;
    var jsonUrl = 'https://www.youtube.com/oembed?format=json&url=' + submittedLink;
    var youtubeData = getData(jsonUrl, submittedLink);
    Actions.reset("Main"); //THIS IS THE RELEVANT LINE
}

А вот мой VideoFeed компонент, который отображает список видео на моей домашней странице компонента:

class VideoFeed extends React.Component {
    constructor() {
        super();
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            })
        };
        this.dataRef = database.ref("music");
    }

    listenForMusic(dataRef){
        let items = [];
        dataRef.orderByChild("date").on('child_added', (snap) => {
                items.push({
                    videoURL: snap.val().videoURL,
                    title: snap.val().title,
                    thumbnail: snap.val().thumbnail
                });
                console.log(items);
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(items)
                });
        });

    }

    componentWillMount() {
        this.listenForMusic(this.dataRef);
    }

    _renderItem(item) {
        return(
            <TouchableHighlight
                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>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <View>
                <ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)}> </ListView>
            </View>
        );
    }

}

я использую componentWillMount() вызвать запрос. Но очевидно, что компонент уже смонтирован в истории, поэтому он не запускается снова, когда я возвращаюсь на домашнюю страницу. Что мне нужно запустить, чтобы вызвать VideoFeed компонент повторно сделать?

Вот мой соответствующий код в routes.js страница, если вам это нужно:

<Router>
                <Scene key="root" hideNavBar
                        navigationBarStyle={{backgroundColor: "#fff"}}
                        titleStyle={navTitleStyle}
                        backButtonTintColor={color.black}
                >
                    <Stack key="Main" initial={this.state.isLoggedIn}>
                        <Scene key="Home" component={Home} title="Home" initial={true} type={ActionConst.REPLACE}/>
                        <Scene key="Video" component={Video} title="Video"/>
                        <Scene key="Profile" component={Profile} title="Profile"/>
                        <Scene key="Leaderboard" component={Leaderboard} title="Leaderboard"/>
                        <Scene key="Submit" component={Submit} title="Submit" />
                    </Stack>
                </Scene>
            </Router>