反应原住民的ListView不更新的数据变化 [英] React Native ListView not updating on data change
本文介绍了反应原住民的ListView不更新的数据变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道为什么在ListView没有当我的数据的变化更新。我已经条纹我的code下来，以方便阅读和创建rnplay：
https://rnplay.org/apps/ivG0mg
我希望发生的是，用户点击列表项，该行的布尔 isCollapsed 翻转使背景的红色。而实际上，数据源被更新，但列表视图中不识别变化并没有什么新的呈现方式。任何想法？
使用严格的;VAR阵营=要求（'反应母语'）;{VAR
滚动型，
文本，
图片，
样式表
TouchableHighlight，
鸭pregistry，
视图，
列表显示，
} =动作;VAR风格= StyleSheet.create（{
容器： {
软硬度：1，
flexDirection：'列'，
填充：15，
}，
红色：{
的backgroundColor：红，
}
}）;VAR食物= [
{键：'杏仁奶（自制），详细信息：''}，
{键：苏打水，详细信息：''，isCollapsed：真正}，
{键：椰奶/霜，详细介绍：''}，
{键：椰子水，详细信息：''}，
{键：咖啡/ ES preSSO'，详细信息：''，isCollapsed：真正}，
{键：'果汁'，详细信息：''}，
{键：红茶菌，详细信息：''}，
{键：'矿泉水'，详细信息：''}，
{键：不加糖的茶，详细信息：''}，
{键：水，详细信息：''}，
{键：'果汁'，详细信息：''}，
{键：红茶菌，详细信息：''}，
{键：'矿泉水'，详细信息：''}，
{键：不加糖的茶，详细信息：''}，
{键：水，详细信息：''}，
{键：'果汁'，详细信息：''}，
{键：红茶菌，详细信息：''}，
{键：'矿泉水'，详细信息：''}，
{键：不加糖的茶，详细信息：''}，
{键：水，详细信息：''}，
{键：'果汁'，详细信息：''}，
{键：红茶菌，详细信息：''}，
{键：'矿泉水'，详细信息：''}，
{键：不加糖的茶，详细信息：''}，
{键：水，详细信息：''}，
{键：'果汁'，详细信息：''}，
{键：红茶菌，详细信息：''}，
{键：'矿泉水'，详细信息：''}，
{键：不加糖的茶，详细信息：''}，
{键：水，详细信息：''}，
];类SampleApp扩展React.Component {
构造函数（道具）{
超（道具）;
变种DS =新ListView.DataSource（{
rowHasChanged：（ROW1，ROW2）=＆GT; ROW1！== ROW2，
}）;
this.state = {
数据源：ds.cloneWithRows（食品），
};
}
_renderRow（数据，sectionID，ROWID）{
返回（
＆LT; TouchableHighlight
风格= {[
styles.container，
data.isCollapsed＆功放;＆安培; styles.red]}
在preSS = {（）=＆GT; this.onCollapse（ROWID）}＆GT;
＆LT;文本＆GT; {data.key}＆LT; /文本＆GT;
＆LT; / TouchableHighlight＆GT;
）;
}
onCollapse（ROWID：数字）{
的console.log（ROWID，ROWID）;
食品[ROWID] .isCollapsed =食品[ROWID] .isCollapsed！;
this.setState（{的dataSource：this.state.dataSource.cloneWithRows（食品）}）;
}
渲染（）{
返回（
＆LT; ListView控件
风格= {} styles.subContainer
数据源= {} this.state.dataSource
renderRow = {this._renderRow.bind（本）}
initialListSize = {15} /＆GT;
）
}
};鸭pregistry.registerComponent（'SampleApp'，（）=＆GT; SampleApp）;
解决方案
下面是一个工作版本的链接：
https://rnplay.org/apps/GWoFWg
这是解决它的变化，我需要做：
构造函数（道具）{
超（道具）;
变种DS =新ListView.DataSource（{
rowHasChanged：（ROW1，ROW2）=＆GT; ROW1！== ROW2，
}）;
this.state = {
数据源：ds.cloneWithRows（食品），
DB：食品，
};
}
和这样的：
onCollapse（ROWID：数字）{
变种newArray = this.state.db.slice（）;
newArray [ROWID] = {
键：newArray [ROWID] .KEY，
详细信息：newArray [ROWID] .details，
isCollapsed：newArray [ROWID] .isCollapsed ==假的？真假，
};
this.setState（{
数据源：this.state.dataSource.cloneWithRows（newArray）
DB：newArray，
}）;
}
I'm not sure why the ListView isn't updating when my data changes. I've striped my code down to make it easy to read and created a rnplay:
https://rnplay.org/apps/ivG0mg
What I expect to happen is, the user clicks the list item and the row's bool isCollapsed is toggled making the background red. What actually happens is the datasource is updated but the list view doesn't recognize the change and nothing new is rendered. Any ideas?
'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);
解决方案
Here's a link to a working version:
https://rnplay.org/apps/GWoFWg
These are the changes I need to make to fix it:
constructor(props){
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
dataSource: ds.cloneWithRows(foods),
db: foods,
};
}
and this:
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,
});
}
这篇关于反应原住民的ListView不更新的数据变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
