我是 React Native 的新手,我正在尝试动态更新列表。
下面是我的代码:
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
而且你不应该需要这个 <List>
从此处 react native 元素列表行为完全由您的 FlatList 处理。
关于javascript - 为什么 FlatList 在 React Native 中没有动态更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50621316/