Let’s talk about the background first: there is a huge flatlist on the page, with 3 items in it. I have a flatlist at the bottom of the third item, which is also the bottom of the entire outer flatlist. This flatlist loads state. The data in requires a pull-up loading function, because the internal flatlist cannot get the pull-down event, so I wrote a pull-up loading method in the outermost layer, obtained the data and put it into the state, thus changing the data inside. . However, although the state has changed, the page is not refreshed.
Print in the background to confirm that the state has changed
Last brief code
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>
)
}
The demo I wrote is achievable
But during the day in the project, the data is an array obtained from the network
I use a new array a to put the array in the state, and then Put the array you brought in, and finally assign the array a to state
but found that there was no change and the page was not refreshed
By the way, is there any better way
You can only trigger render through setState.
Cannot be triggered by direct assignment
Although I don’t know how you actually implemented it, I guess you used the latter method.