Каков правильный способ сохранения данных из списка?

77
7

У меня есть компонент SearchPage, который выполняет запрос, а затем отображает результаты в виде списка. Затем пользователь выбирает, какие из результатов они хотят, нажимая на них. Это сохраняет их в массиве в компоненте SearchResults.

Как видно из приведенного ниже кода, метод "displayWords" вызывается, когда результаты возвращаются. Он подталкивает новый вид стека, SearchResults, устанавливает правильную кнопку "Сохранить" и присоединяет функцию, которая будет вызываться, которая хочет сохранить данные.


class SearchPage extends Component {

displayWords(words) {
this.props.navigator.push({
title: 'Results',
component: SearchResults,
rightButtonTitle: 'Save',
onRightButtonPress: () => {this.props.navigator.pop();
this.props.save()},
passProps: {listings: words}
});
this.setState({ isLoading: false , message: '' });
}

Итак, вот вопрос, как мне получить элементы из массива в компоненте SearchResults в обратном вызове? Или в SearchPage? Или есть другой образец, за которым я должен следовать?

спросил(а) 2021-01-25T17:10:37+03:00 4 месяца, 2 недели назад
1
Решение
63

Интересный вопрос!

Философски говоря, вся концепция навигатора и навигационного стека разбивает поток данных React-y. Поскольку, если вы можете отобразить компонент SearchResults просто как подкомпонент SearchPage, вы просто сделаете выбранные результаты поиска частью процесса SearchPage и передадите их в SearchPage качестве реквизита. SearchPage также получит обратный вызов для уведомления SearchResults всякий раз, когда результат поиска переключается.

Увы, с навигатором, каким он есть, вам придется дублировать состояние.

    displayWords(words) {
this.props.navigator.push({
title: 'Results',
component: SearchResults,
rightButtonTitle: 'Save',
onRightButtonPress: () => {this.props.navigator.pop();
this.props.save()},
passProps: {listings: words, onWordToggle: this.onWordToggle}
});
this.setState({ isLoading: false , message: '' });
}

onWordToggle(word) {
// add or remove 'word' from e.g. this._selectedWords; no need for
// this.state because re-rendering not required
}

в то время как SearchResults будет поддерживать список выбранных слов в этом this.state и просто уведомлять this.props.onWordToggle всякий раз, когда слово добавляется или удаляется.

ответил(а) 2021-01-25T17:10:37+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема