先说背景:页面上是一个巨大的flatlist,里面有3个item,我在第三个item内部的最下面也就是整个外层flatlist的最下面有一个flatlist,这个flatlist加载的是state中的数据,需要做上拉加载功能,因为内部的flatlist拿不到下拉事件,所以我在最外层写了上拉加载的方法,获取到数据放到state中,这样就改变了里面的数据。但是,虽然state变了,页面却没刷新。
后台打印确定state改变了
上个简要的代码
constructor(props) {
super(props)
this.state = {
data: [{"key": 1}, {"key": 2}, {"key": 3}],
}
this._changeData = this._changeData.bind(this);
}
_changeData(){
this.setState({
data :[{"key": 1}, {"key": 2}, {"key": 3},{"key": 4},{"key": 5}],
})
}
_renderItem = ({item}) => {
switch (item.key) {
case 1:
return (
<View>
<Text style={{height: 200}}>1111</Text>
</View>
);
case 2:
return (
<View>
<Text style={{height: 200}}>ke2222y2</Text>
</View>
);
case 3:
return (
//这个flatlist需要做上拉加载
<FlatList
data={this.state.data}
renderItem={({item}) => <View style={{height: 200}}><Text>{item.key}</Text></View>}
/>
)
}
}
render() {
const {navigate} = this.props.navigation;
let user = {'name': 'zy', age: 18}
return (
<View>
<Text onPress={() => navigate('Two', {user: user})}>Home</Text>
<FlatList
data={[{"key": 1}, {"key": 2}, {"key": 3}]}
renderItem={this._renderItem}
onEndReached={this._changeData}
onEndReachedThreshold={0.3}
/>
<Text onPress={() => navigate('Two', {user: user})}>Home</Text>
</View>
)
}
我写的这个demo是可以实现的
但是白天在项目里,那个数据是从网络获取过来的一个数组
我用一个新的数组a把state里的数组放进去,再把拿过来的数组也放进去,最后把这个数组a赋值给state
但发现并没有变化,页面没有刷新
顺便问一下有什么更好的方法
你只能通过setState去触发render。
不能通过直接赋值去触发
虽然不知道你真正实现是怎样的,但我估计你用了后者这种方式。