javascript - Pourquoi la page ne s'actualise-t-elle pas lorsque l'état change dans ce cas?

Question

Parlons d'abord de l'arrière-plan : il y a une énorme liste plate sur la page, avec 3 éléments. J'ai une liste plate au bas du troisième élément, qui est également le bas de la liste plate externe entière. état. Les données ont besoin d'une fonction de chargement pull-up, car la liste plate interne ne peut pas obtenir l'événement pull-down, j'ai donc écrit la méthode de chargement pull-up dans la couche la plus externe pour obtenir les données et les mettre dans l'état, changeant ainsi les données à l'intérieur. Cependant, même si l'état a changé, la page n'est pas actualisée.
Imprimer en arrière-plan pour confirmer que l'état a changé

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

La démo que j'ai écrite est réalisable
Mais pendant la journée dans le projet, les données sont un tableau obtenu à partir du réseau
J'utilise un nouveau tableau a pour mettre le tableau dans l'état, puis je mets le tableau obtenu Mettez-le dedans, et enfin attribuer ce tableau a à l'état
Mais j'ai constaté qu'il n'y avait aucun changement et que la page n'était pas actualisée

Answer 1

Au fait, existe-t-il une meilleure façon

Answer 2

Vous ne pouvez déclencher le rendu que via setState.

this.setState({
    data: anotherData
})

Ne peut pas être déclenché par affectation directe

this.state.data = anotherData

Bien que je ne sache pas comment vous l'avez réellement implémenté, je suppose que vous avez utilisé cette dernière méthode.