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

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

如下面的代码所示，当返回结果时调用“displayWords”方法。 它推动堆栈上的新视图，SearchResults，将右边的button设置为“Save”，并附加一个要调用的函数来保存数据。

     class SearchPage extends Component {

    显示词（词）{
       this.props.navigator.push（{
        标题：“结果”，
        组件：SearchResults，
         rightButtonTitle：'保存'，
         onRightButtonPress：（）=> {this.props.navigator.pop（）;
                                    this.props.save（）}，
         passProps：{listing：words}
       }）;
       this.setState（{isLoading：false，message：''}）; 
    }
   

所以这里是一个问题，我如何从SearchResults组件中的数组中获取项目到callback中？ 还是到SearchPage？ 或者还有另一种模式，我应该遵循？

Answer 1

有趣的问题！

从哲学上讲，整个导航器和导航堆栈概念types都打破了React-y数据stream。 因为如果您可以将SearchResults组件简单渲染为SearchPage的子组件，则只需将所选search结果作为SearchPage状态的一部分，并将它们作为道具传递到SearchPage 。 每当search结果被切换时， SearchPage也会得到一个callback来通知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 eg this._selectedWords; no need for // this.state because re-rendering not required } 

而SearchResults会在其this.state维护所选单词的列表，只要添加或删除单词，只需通知this.props.onWordToggle即可。