当this.state改变时(但不是dataSource),如何强制重绘ListView.

Question

我创建了一个使用a ListView来显示联系人列表的组件.单击一行时,我更新了state包含所有选定联系人的组件中的数组.但是,我没有将此数组用作dataSource我的ListView组件.

我想重新ListView修改此数组,以便显示所选联系人的图像.

以下是我目前情况的一个例子:

renderListView: function(){
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        style={styles.listView}
    />
}
renderRow:function(row){
    return if(this.state.something === true) <Text>Something</Text>
   else <Text>Something Else</Text>
}

我试着打电话.forceUpdate(),它调用render方法而不是renderRow方法.

有什么建议吗？

Answer 1

我刚才有同样的问题.在这里查看我的问题: React Native ListView没有更新数据更改

基本上,ListView组件似乎存在一个错误,您需要重新构建ListView数据源中更改的每个项目以重绘它.

这是一个有效的例子:https: //rnplay.org/apps/GWoFWg

首先,创建数据源和数组的副本并将其保存到状态.就我而言,foods是数组.

constructor(props){
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
        dataSource: ds.cloneWithRows(foods),
        db: foods,
    };
}

如果要更改数据源中的某些内容,请将保存到的数组的副本复制到状态,使用更改重建项目,然后将更改保存到新数组(db和datasource).

onCollapse(rowID: number) {
    console.log("rowID", rowID);
    var newArray = this.state.db.slice();
    newArray[rowID] = {
        key: newArray[rowID].key,
        details: newArray[rowID].details,
        isCollapsed: newArray[rowID].isCollapsed == false ? true : false,
    };
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newArray),
        db: newArray,
    });
}