React Native ListView 不更新数据更改

Posted 2023-02-26

【中文标题】React Native ListView 不更新数据更改

【英文标题】：React Native ListView not updating on data change

【发布时间】：2016-01-30 08:01:24

【问题描述】：

我不确定为什么当我的数据更改时 ListView 没有更新。我已将我的代码精简为易于阅读并创建了一个 rnplay：

https://rnplay.org/apps/ivG0mg

我期望发生的是，用户单击列表项，并且该行的布尔值isCollapsed 被切换，使背景变为红色。实际发生的是数据源已更新，但列表视图无法识别更改并且没有呈现任何新内容。有什么想法吗？

'use strict';

var React = require('react-native');

var 
    ScrollView,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    AppRegistry,
    View,
    ListView,
 = React;

var styles = StyleSheet.create(
    container: 
        flex: 1,
        flexDirection: 'column',
        padding: 15,
    ,
    red: 
        backgroundColor: "red",
    
);

var foods = [
    key: 'Almond Milk (Homemade)', details:'',
    key: 'Club Soda', details:'', isCollapsed: true,
    key: 'Coconut Milk/Cream', details:'',
    key: 'Coconut Water', details:'',
    key: 'Coffee/Espresso', details:'', isCollapsed: true,
    key: 'Fruit Juice', details:'',
    key: 'Kombucha', details:'',
    key: 'Mineral Water', details:'',
    key: 'Unsweetened Tea', details:'',
    key: 'Water', details:'',
    key: 'Fruit Juice', details:'',
    key: 'Kombucha', details:'',
    key: 'Mineral Water', details:'',
    key: 'Unsweetened Tea', details:'',
    key: 'Water', details:'',
    key: 'Fruit Juice', details:'',
    key: 'Kombucha', details:'',
    key: 'Mineral Water', details:'',
    key: 'Unsweetened Tea', details:'',
    key: 'Water', details:'',
    key: 'Fruit Juice', details:'',
    key: 'Kombucha', details:'',
    key: 'Mineral Water', details:'',
    key: 'Unsweetened Tea', details:'',
    key: 'Water', details:'',
    key: 'Fruit Juice', details:'',
    key: 'Kombucha', details:'',
    key: 'Mineral Water', details:'',
    key: 'Unsweetened Tea', details:'',
    key: 'Water', details:'',
];

class SampleApp extends React.Component
    constructor(props)
        super(props);
        var ds = new ListView.DataSource(
            rowHasChanged: (row1, row2) => row1 !== row2,
        );
        this.state = 
            dataSource: ds.cloneWithRows(foods),
        ;
    
    _renderRow(data, sectionID, rowID) 
                return (
                        <TouchableHighlight 
                            style=[
                                    styles.container,
                                    data.isCollapsed && styles.red]
                onPress=()=>this.onCollapse(rowID)>
                <Text>data.key</Text>
            </TouchableHighlight>
        );
    
    onCollapse(rowID: number) 
        console.log("rowID", rowID);
        foods[rowID].isCollapsed = !foods[rowID].isCollapsed;
        this.setState(dataSource: this.state.dataSource.cloneWithRows(foods));
    
    render() 
        return(
            <ListView
                style=styles.subContainer
                dataSource=this.state.dataSource
                renderRow=this._renderRow.bind(this)
                initialListSize=15/>
        )
    
;

AppRegistry.registerComponent('SampleApp', () => SampleApp);

【参考方案1】：

这是一个工作版本的链接：

https://rnplay.org/apps/GWoFWg

这些是我需要进行的更改来修复它：

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) 
    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,
    );

【讨论】：

链接失效了...能更新一下吗？谢谢

使用 es6 中的 ...newArray[rowID]，您可以重复使用 newArray[rowID] obj.. 中的所有键，最后添加更改后的键

通过这个我需要设置所有的值如果我只想设置更新的值怎么办？

【参考方案2】：

看起来这将是您需要的解决方案 React-Native Updating List View DataSource

但我玩了一点，也无法让它工作。 https://rnplay.org/apps/sk_ukQ

不确定它是否会有所帮助，但我尝试将数组设置为空白并且能够清除整个列表... this.setState(dataSource: this.state.dataSource.cloneWithRows([]));

我认为出于某种原因，它使用的是原始数组的缓存版本，而不是更新后的数组。只是不知道为什么。

【讨论】：

感谢您的链接。答案就在 cmets 中。对它进行更改时，我必须重建该项目。似乎是一个错误，我希望在某个时候得到修复。 rnplay.org/apps/GWoFWg

啊，很好！很高兴我至少能够为您指明正确的方向。感谢分享解决方案。

另外，你或许可以帮帮这个人...***.com/questions/33436902/…

刚刚也回答了这个问题。你就像 *** 的罗宾汉。左右回答问题。 :)

哈，只是连接点:)