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状态的一部分并将其传递给{{ 1}}作为道具。每当搜索结果被切换时，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。

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

1 个答案: