javascript - Why does the page not refresh when the state changes in this case?

Question

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

Answer 1

By the way, is there any better way

Answer 2

You can only trigger render through setState.

this.setState({
    data: anotherData
})

Cannot be triggered by direct assignment

this.state.data = anotherData

Although I don’t know how you actually implemented it, I guess you used the latter method.