javascript - Warum wird die Seite in diesem Fall nicht aktualisiert, wenn sich der Status ändert?

Question

Lassen Sie uns zuerst über den Hintergrund sprechen: Es gibt eine riesige Flatlist auf der Seite, mit 3 Elementen darin. Ich habe eine Flatlist am Ende des dritten Elements, das auch das Ende der gesamten äußeren Flatlist ist Für die Daten ist eine Pull-up-Ladefunktion erforderlich, da die interne Flatlist das Pull-down-Ereignis nicht abrufen kann. Daher habe ich die Pull-up-Lademethode in die äußerste Ebene geschrieben, um die Daten abzurufen und in den Status zu versetzen die darin enthaltenen Daten. Obwohl sich der Status geändert hat, wird die Seite nicht aktualisiert.
Drucken Sie im Hintergrund, um zu bestätigen, dass sich der Status geändert hat

Letzter Kurzcode

 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>
        )
    }

Die Demo, die ich geschrieben habe, ist erreichbar
Aber tagsüber im Projekt sind die Daten ein Array, das aus dem Netzwerk abgerufen wird
Ich verwende ein neues Array a, um das Array in den Status zu versetzen, und versetze dann das erhaltene Array. und schließlich diesem Array einen Zustand zuweisen
Aber ich habe festgestellt, dass es keine Änderung gab und die Seite nicht aktualisiert wurde

Answer 1

顺便问一下有什么更好的方法

Answer 2

你只能通过setState去触发render。

this.setState({
    data: anotherData
})

不能通过直接赋值去触发

this.state.data = anotherData

虽然不知道你真正实现是怎样的，但我估计你用了后者这种方式。