Я создаю приложение, в котором использую Redux и библиотеку React-Navigation. У меня есть список тренировок в FlatList:
<FlatList
style={{ backgroundColor: colors.background }}
data={this.props.workoutsList}
renderItem={({ item }) =>
<ListItem workout={item} onPress={() => this.props.navigation.navigate('Workout', item)} />
}
keyExtractor={(item) => item.id}
/>
Это показывает мой список правильно, и я могу переходить к конкретной странице тренировки для каждой строки, которую я нажимаю, и при каждом нажатии мне предоставляется прикрепленная тренировка. На этой конкретной странице тренировки у меня есть форма редактирования тренировки, где пользователи могут, например, обновить название и время тренировки.
Все это не проблема ... проблема у меня возникает, когда я нажимаю кнопку «Назад» в меню, которое возвращает меня к основному списку всех тренировок. FlatList все еще показывает старые данные и является источником моей проблемы. Он кэширует эти данные, поэтому мои новые сохранения не отображаются, и, как следствие, когда я снова нажимаю на элемент списка, он присоединяет старую информацию о тренировке, а не самую новую, которую я только что сохранил. (надеюсь, что это имеет смысл)
Я видел несколько похожий вопрос: React Navigation: как обновить заголовок навигации для родительского элемента, если значение исходит из redux и обновляется в дочернем?, но это не совсем отражает мой главный вопрос:
Возможно ли, чтобы FlatList мог обновлять определенную строку из настройки redux, сохраняя при этом ее положение прокрутки?
Я вижу, что это очень хорошо работает в приложении Facebook ... когда кто-то прокручивает свою Стену, допустим, он нажимает на элемент с надписью «xx Comments». Это переместит приложение на страницу, показывающую только этот пост. Вы можете поставить лайк / комментарий, и когда вы нажмете стрелку назад, вы вернетесь точно в то положение прокрутки стены, которое было раньше, И количество лайков / комментариев было обновлено, чтобы показать ваш вклад. Возможно ли это в React Native?
Если это невозможно ... кто-нибудь знает, как хотя бы обновить страницу при переходе с помощью кнопки возврата в React-Navigation?
ИЗМЕНИТЬ. Я готов использовать другую библиотеку навигации, если где-то еще есть более подходящие настройки!
ОБНОВЛЕНИЕ. Я попытался решить эту проблему несколькими способами. Один из способов, который я пробовал, заключался в следующем:
Когда я успешно сохранил форму, я отправил действие «NEEDS_REFRESHING». Это установило опору redux, которую я нашел на главной странице FlatList. На рендере этой страницы у меня было:
if (this.props.needsRefreshing) {
console.log('Needs Refreshing');
this.props.getWorkouts();
}
Я видел консоль, и моя страница FlatList обновлялась должным образом (она не возвращала меня к правильному положению прокрутки, поскольку она просто обновляла основной список) ... но я всегда получал предупреждение от React Native:
Невозможно обновить во время существующего перехода состояния (например, в
render
или в конструкторе другого компонента). Методы рендеринга должны полностью зависеть от свойств и состояния; побочные эффекты конструктора - это анти-шаблон, но их можно переместить вcomponentWillMount
.
Когда я переместил это в componentWillMount, соответствующие обновления никогда не вызывались, и даже console.log в componentWillMount не отображался.
render
при обновлении хранилища redux? Не могли бы вы предоставить код для своего действия / редуктора - person sooper   schedule 30.05.2017