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

2023-11-24

我创建了一个使用ListView显示联系人列表。单击一行时,我更新了一个数组state的组件包含所有选定的联系人。但是,我没有使用这个数组作为dataSource for my 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 method.

有什么建议吗?


我刚刚遇到了同样的问题。在这里查看我的问题: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,
    };
}

当您想要更改数据源中的某些内容时,请复制保存到状态的数组,重建包含更改的项目,然后将包含更改的新数组保存回状态(数据库和数据源)。

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,
    });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当 this.state 改变时(但不是 dataSource)如何强制重绘 ListView。 的相关文章

随机推荐