我对原生反应很陌生,我正在尝试动态更新列表。
下面是我的代码:
import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Tile, ListItem, List } from "react-native-elements";
export default class JoinSession extends Component {
constructor() {
super();
this.state = {
dataToRender: [{ "id": "0", "name": "name0", "des": "des0" }]
}
}
componentDidMount() {
var counter = 0;
const interval = setInterval(() => {
try {
var temp = {
"id": ++counter + "",
"name": "name" + counter,
"des": "des" + counter
}
let tempArray = this.state.dataToRender;
tempArray.push(temp);
this.setState({
dataToRender: tempArray
});
console.log(this.state.dataToRender);
if(counter === 10) {
clearInterval(interval);
}
} catch (e) {
console.log(e.message);
}
}, 2000);
}
renderList(item) {
console.log(item);
return (
<ListItem
roundAvatar
title={item.name}
subtitle={item.des}
/>
);
}
render() {
return (
<View style={{ flex: 1, alignItems: "stretch", backgroundColor: "skyblue" }}>
<List>
<FlatList
data={this.state.dataToRender}
renderItem={({ item }) => this.renderList(item)}
keyExtractor={item => item.id}
/>
</List>
</View>
);
}
}
我只能获取我在构造函数中声明的第一个元素,但我在 serInterval 中附加的数据没有显示在页面上。
请帮我解决这个问题,或者如果有其他方法,请告诉我。
提前致谢。
您好,尝试查看一下可以在 FlatList 上使用的 extraData 参数:
通过传递extraData={this.state}
对于 FlatList,我们确保 FlatList 本身会在 state.selected 更改时重新渲染。如果不设置此 prop,FlatList 将不知道它需要重新渲染任何项目,因为它也是一个 PureComponent,并且 prop 比较不会显示任何更改。
<FlatList
...
extraData={this.state}
/>
有关 FlatList 文档的更多信息:https://facebook.github.io/react-native/docs/flatlist.html https://facebook.github.io/react-native/docs/flatlist.html
另外你不应该需要这个<List>
从反应本机元素这里列表行为完全由您的 FlatList 处理。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)