Question

我在react-native中使用ListView。我希望按功能更新ListView，因此我使用了this.setState。

<Button onPress={()=>this.setState({word:this.state.word})}>Btn</Button>

按下按钮后，render()方法有效，但renderRow方法不起作用。所以ListView不起作用。我该如何解决？

这是我的ListView

<ListView
    datasource={this.state.dataSource}
    renderRow={this._renderRow.bind(this)}/>

和我的_renderRow

_renderRow(param){
    return(
        <View>{param.word.includes(this.state.word)&&<Text>{param.word}</Text>}</View>
    );
}

我想在按下按钮时更新listview，并显示param.word包含this.state.word的列表

Answer 1

更新ListView的DataSource时会触发

renderRow。因此，您的按钮似乎应该更新this.state.dataSource而不是this.state.word。

来自：https://facebook.github.io/react-native/docs/listview.html

在构造函数中，您应该初始化DataSource：

constructor() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
}

然后，您可以使用ListView注册DataSource：

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
}

数据更改后，您可以更新DataSource：

onDataChanged(newData) {
  var ds = this.state.dataSource.cloneWithRows(newData);
  this.setState({dataSource: ds});
}

这将触发您的renderRow功能。

Answer 2

不要错过cloneWithRows调用ListView Component所需的ListViewDataSource属性。 Documentation说：

要更新数据源中的数据，请使用cloneWithRows（如果您关心部分，请使用cloneWithRowsAndSections）。数据源中的数据是不可变的，因此您无法直接修改它。克隆方法会吸收新数据并计算每行的差异，以便ListView知道是否重新渲染它。

如果在构造函数中初始化了DataSource：

constructor(props) {
    var ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2});
    this.state = { datasource: ds.cloneWithRows(['A', 'B', 'C']) };
}

您的更新功能可能如下所示：

fetchData() {
    //... fetching logic
    var items = ['D', 'E', 'F'];
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
    });
}

如何在ListView中调用renderRow？

2 个答案: