Блог

Главная - Вопросы по программированию - Как обновить содержимое в react native после изменения данных

Как обновить содержимое в react native после изменения данных

#react-native

#react-native

Вопрос:

Я использую плоский список, в этом плоском списке я могу удалить любой элемент, но после удаления я не обновляюсь, даже если я использовал componentDidMount()! Также, когда я пытался добавить элемент в свой список, он не появляется .. всегда мне нужно перезагрузить приложение, чтобы получить мои изменения

 constructor() {
        super()
        this.state = {
            associations: [],
            associations2: []
        }
    }

    componentDidMount(){
        this.getAll();
    }

    getAll =async ()=>{
        fetch("http://192.168.1.100:8000/association/trouver/benevole/" id, {method: 'GET',headers:headers })
            .then(response => response.json())
            .then(data =>{
                for(var i=0; i<data.length ; i  ){
                    this.state.associations.push(data[i]);
                }
                this.setState({associations2:this.state.associations})  })
    }

    quitter = async(id) => {fetch("http://192.168.1.100:8000/benevole/supprimer/" idBenevole "/association/" id, {method: 'PUT',headers: headers }).then(response => response.json())
                    .then(data => {
                        if (data['state'] === "non") {
                            Toast.show({
                                text: "Erreur de supression"
                                type: "warning"})}
                        else {
                            Toast.show({
                                text: "Supression avec succée",
                                type: "success",
                                duration: 4000 })}})
        this.getAll();
    }

    render() {
        return (
            <Container style={styles.container}>
            <Content padder style={{ marginTop: 0 }}>
                {this.state.associations2.length!== 0 ?
                    <FlatList data={this.state.associations2}
                        extraData={this.state.associations2}
                        keyExtractor={(item, index) => String(index)}
                        renderItem={({item}) => {
                            return (
                                <Card style={styles.mb}>
                                    <CardItem bordered>
                                        <Left>
                                            <Thumbnail source={{uri:`api/${item.imageAssociation}`}}/>
                                            <Body>
                                            <Text style={styles.nomAssociation}>{item.nom.toUpperCase()}</Text>
                                            <Text note>{item.createdAt.substring(0, 10)}</Text>
                                            </Body>
                                        </Left>
                                    </CardItem>
                                </Card>
                            );
                        }}
                    />:null
                }
                {this.state.associations2.length== 0 ?
                    <Text>Vous n'êtes pas encore membre dans des associations</Text>:null
                }
            </Content>
            </Container>
        );
    }

Я ожидаю, что мой список данных обновляется при удалении элемента или при добавлении элемента, но при этом даже данные не изменяются!

Ответ №1:

Несколько вещей, которые я бы изменил: состояние должно рассматриваться как неизменяемое, это означает:

 // change those lines
for(var i=0; i<data.length ; i  ){
  this.state.associations.push(data[i]);
}
// to this
const { associations } = this.state;
for(let i = 0; i < data.length ; i  ) {
  this.setState({ associations: [ ...associations, data[i]] })
}
// also add this to your state
...
this.state = { extraData: false }
...
// whenever you change the associations2 array do this
const { extraData } = this.state;
this.setState({ associations2: this.state.associations, extraData: !extraData });
// in your FlatList
<FlatList extraData={this.state.extraData} />

и, пожалуйста, не используйте index в качестве ключа в вашем FlatList