ios - 从 ListView 中保存数据的正确方法是什么？

Question

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

如以下代码所示，返回结果时将调用“displayWords”方法。它在堆栈上推送一个新 View 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？还是我应该遵循另一种模式？

Answer 1

有趣的问题!

从哲学上讲，整个导航器和导航堆栈概念有点破坏了 React-y 数据流。因为如果您可以将 SearchResults 组件简单地呈现为 SearchPage 的子组件，您只需将选定的搜索结果作为 SearchPage 的一部分声明并将它们作为 Prop 传递到 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添加或删除。