响应本机ListView在数据更改时不更新

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

我期望发生的是，用户单击列表项，该行的bool

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

“严格使用”；
var React=require（'React-native'）；
变量{
滚动视图，
文本，
形象,，
样式表，
触控高光，
评估学，
看法
ListView，
}=反应；
var styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
填充：15，
},
红色：{
背景颜色：“红色”，
}
});
var食品=[
{关键字：'杏仁奶（自制）'，详细信息：'}，
{关键字：'Club Soda'，详细信息：''，已合并：true}，
{关键字：'椰奶/奶油'，详细信息：'}，
{关键字：'椰子水'，详细信息：'}，
{key:'Coffee/Espresso'，详细信息：''，已合并：true}，
{键：'果汁'，详细信息：'}，
{键：'康普茶'，详细信息：'}，
{关键字：“矿泉水”，详细信息：'}，
{键：'不加糖的茶'，详细信息：'}，
{键：'水'，详细信息：'}，
{键：'果汁'，详细信息：'}，
{键：'康普茶'，详细信息：'}，
{关键字：“矿泉水”，详细信息：'}，
{键：'不加糖的茶'，详细信息：'}，
{键：'水'，详细信息：'}，
{键：'果汁'，详细信息：'}，
{键：'康普茶'，详细信息：'}，
{关键字：“矿泉水”，详细信息：'}，
{键：'不加糖的茶'，详细信息：'}，
{键：'水'，详细信息：'}，
{键：'果汁'，详细信息：'}，
{键：'康普茶'，详细信息：'}，
{关键字：“矿泉水”，详细信息：'}，
{键：'不加糖的茶'，详细信息：'}，
{键：'水'，详细信息：'}，
{键：'果汁'，详细信息：'}，
{键：'康普茶'，详细信息：'}，
{关键字：“矿泉水”，详细信息：'}，
{键：'不加糖的茶'，详细信息：'}，
{键：'水'，详细信息：'}，
];
类SampleApp扩展了React.Component{
建造师（道具）{
超级（道具）；
var ds=new ListView.DataSource({
行已更改：（行1，行2）=>行1！==行2，
});
此.state={
数据来源：ds.cloneWithRows（食品），
};
}
_renderRow（数据、节ID、行ID）{
返回(
this.onCollapse（rowID）}>
{data.key}
);
}
onCollapse（rowID:number）{
console.log（“rowID”，rowID）；
食品[rowID]。isCollapsed=！食品[rowID]。isCollapsed；
this.setState（{dataSource:this.state.dataSource.cloneWithRows（foods）}）；
}
render（）{
返回(
)
}
};
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

看起来这就是您需要的解决方案

但我玩了一会儿，也没能让它工作。

不确定它是否有用，但我尝试了将数组设置为空白，并能够清除整个列表。。。 this.setState（{dataSource:this.state.dataSource.cloneWithRows（[]）}）

---

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

这里有一个指向工作版本的链接：

我需要做以下更改来修复它：

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中的所有键。。只需在末尾添加更改的键，我需要设置所有的值，如果我只想设置更新的值呢？