React Native ListView 行在状态更改后不重新呈现 [英] React Native ListView row not re-rendering after state change

问题描述

React Native ListView:在数据源状态改变后不会重新渲染行.

React Native ListView: Rows are not re-rendering after datasource state has changed.

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

Here is a simplified version of my code:

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() 函数来自数据源更改.

According to Facebook's example, ListView is supposed to rerender every time data source is changed. Is it because I'm only changing a property of an item in data source? It seems like renderRow function is not re-rendering, but render() function is from datasource change.

谢谢.

推荐答案

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

First you need to set the datasource in the getInitialState function. Then, change the datasource by calling this.setState({}) and passing in the new datasource. It looks like you may have been on the right track above, but I have set up a working example of changing the ListView datasource here . I hope this helps

https://rnplay.org/apps/r3bzOQ

这篇关于React Native ListView 行在状态更改后不重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！