先說背景:頁面上是一個巨大的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。
不能透過直接賦值去觸發
雖然不知道你真正實現是怎樣的,但我估計你用了後者這種方式。