React Native ListView 行在状态更改后不重新渲染答案

【问题标题】：React Native ListView row not re-rendering after state changeReact Native ListView 行在状态更改后不重新渲染
【发布时间】：2018-07-31 20:20:32
【问题描述】：

React Native ListView：数据源状态更改后不会重新渲染行。

这是我的代码的简化版本：

render(): {
  return <ListView
    dataSource={this.state.DS}
    renderRow={this.renderRow}/>
}

renderRow(item): {
  return <TouchableOpacity onPress={() => this.handlePress(item)}>
    {this.renderButton(item.prop1)} 
    </TouchableOpacity>
}

renderButton(prop1): {
  if (prop1 == true) {
    return <Text> Active </Text>
  } else {
    return <Text> Inactive </Text>
  }
}

handlePress(item): {
  **Change the prop1 of *item* in an array (clone of dataSource), then**
  this.setState({
    DS: this.state.DS.cloneWithRows(arrayFromAbove)
  })
}

根据 Facebook 的示例，ListView 应该在每次更改数据源时重新呈现。是因为我只更改数据源中某个项目的属性吗？看起来 renderRow 函数没有重新渲染，但 render() 函数来自数据源更改。

谢谢。

【问题讨论】：

标签： react-native

【解决方案1】：

react 足够聪明，可以检测 dataSource 的变化以及是否应该重新渲染列表。如果要更新 listView，请创建新对象而不是更新现有对象的属性。代码看起来像这样：

let newArray = this._rows.slice();
newArray[rowID] = {
  ...this._rows[rowID],
  newPropState: true,
};
this._rows = newArray;

let newDataSource = this.ds.cloneWithRows(newArray);
this.setState({
  dataSource: newDataSource
});

你可以阅读更多类似的issue on Github

【讨论】：

【解决方案2】：

首先你需要在getInitialState函数中设置datasource。然后，通过调用this.setState({}) 并传入新数据源来更改数据源。看起来您可能已经走上了正确的轨道，但我已经设置了一个更改 ListView 数据源here 的工作示例。我希望这会有所帮助

https://rnplay.org/apps/r3bzOQ

【讨论】：

感谢您的建议/示例！我在我的项目中肯定做了同样的事情。我认为问题在于，当数据源是对象数组并且仅更改一个对象的属性时，ListView 不会重新呈现一行。控制台告诉我数据源中一个对象的属性确实发生了变化，但 ListView 确实识别它并且不会重新呈现更改的行。您对此有可能的解决方法吗？
调用 this.setState 会重新渲染。你能在这里复制这个问题吗：rnplay.org/apps/Dw08-g.
肯定是重复的（rnplay.org/apps/1-sNcQ）。看起来数据源正在改变，但 renderRow 函数没有运行。谢谢。
好的，我最终将DS的初始状态设置为一个空数组，然后将数据的状态设置为数据。然后，在 click 函数上，改变数据，然后重置状态，效果很好，无需重置 DS 状态。让我知道这是否有帮助，我将使用此链接编辑我的上述答案。 rnplay.org/apps/r3bzOQ