React Native 列表视图不会在行编辑时刷新答案

【问题标题】：React Native listview does not refresh on row editReact Native 列表视图不会在行编辑时刷新
【发布时间】：2016-04-06 20:26:42
【问题描述】：

列表视图无法刷新它的数据源时遇到问题，除非我离开页面并返回。我的列表视图位于 NavigatorIOS 组件内。

我读过的每一篇文章都是用新对象刷新数据源。当我从数据源中删除/添加某些内容时，它可以正常工作，但是当我只想从数据源中编辑一行时，它不会刷新视图。

此代码不起作用

editMessage(title, message, messageIndex, replyIndex){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var newData =  [];
    newData = this.state.data.slice();
    newData[messageIndex].replies[replyIndex].title= title;
    newData[messageIndex].replies[replyIndex].message= message;
    this.setState({data: newData});
    this.setState({dataSource: ds.cloneWithRows(newData)});
},

但是这样的示例可以正常工作

    removeMessage(index){
    console.log(index);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var newData = this.state.data;
    newData.splice(index, 1);


    this.setState({dataSource: ds.cloneWithRows(newData)});

},

编辑：我已经尝试过按值复制，还是不行。

newData = JSON.parse(JSON.stringify(this.state.data)); newData[messageIndex].replies[replyIndex].title= title; newData[messageIndex].replies[replyIndex].message= message; this.setState({dataSource: ds.cloneWithRows(newData)}); this.setState({data: newData});

【问题讨论】：

标签： javascript listview react-native

【解决方案1】：

我想知道这是否是 this.state 上的引用错误。因为您正在更改对象数组中对象的属性，这些对象将具有指向原始 this.state 数组的指针。如果您随后将该数组设置为原始状态，它会认为它与您仅修改数组中的对象相同。来自 array.slice 上的 Mozilla 文档

"对于对象引用（而不是实际对象），切片将对象引用复制到新数组中。原始数组和新数组都引用同一个对象。如果引用的对象发生更改，则更改对新数组都是可见的和原始数组。” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

【讨论】：

修改this.state.data后我已经尝试newData = JSON.parse(JSON.stringify(this.state.data));，仍然没有变化。我的印象是按值复制的代码行

【解决方案2】：

我认为问题出在我的逻辑上，即使状态已更新，孩子也不会刷新。

目前父数据源是这样的

[
 {
  index: 
  author: 
  title: 
  message: 
  replies: [{
              author: 
              title: 
              message:
            }]
 }
]

子组件仅使用回复数组作为数据源

  replies: [{
              author: 
              title: 
              message:
            }]

为什么这很重要？当我更改父状态时，孩子的数据源也会发生变化，因为它使用的是相同的数据源。但它不会刷新页面。即使父级更改了状态，我也必须更新子级数据源。

父母有这个代码

editMessage(title, message, messageIndex, replyIndex){

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

this.state.data[messageIndex].replies[replyIndex].title= title;
this.state.data[messageIndex].replies[replyIndex].message= message;

this.setState({dataSource: ds.cloneWithRows(this.state.data)});
this.setState({data: this.state.data});

孩子有这个代码

editMessage(title, message, replyIndex){

this.props.editMessage(title, message, this.props.pushEvent.index ,replyIndex); 
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({dataSource: ds.cloneWithRows(this.state.replies)});

【讨论】：