从列表视图中保存数据的正确方法是什么？

Question

我有一个执行查询然后在列表视图中显示结果的 SearchPage 组件。然后，用户通过点击来选择他们想要的结果。这会将它们保存到 SearchResults 组件中的一个数组中。

如下面的代码所示，返回结果时会调用 'displayWords' 方法。它在堆栈上推送一个新视图 SearchResults，将右侧按钮设置为 "Save"，并附加一个要调用的函数以保存数据。

    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？还是我应该遵循另一种模式？

Answer 1

有趣的问题！

从哲学上讲，整个导航器和导航堆栈概念有点破坏了 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。

从列表视图中保存数据的正确方法是什么？

What is the right way to save data from a list view?

callback

ios

react-native