Состояние реакции не обновляется сразу после удаления данных

Question

У меня проблема с обновлением представления в React Native после удаления POST.

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

Это мой список сообщений.

Когда я нажимаю на элемент, он просит нас подтвердить действие.

Когда мы подтверждаем действие удаления, POST удаляется из Firebase, но представление не обновляется (по-прежнему 2 элемента в списке, но только один в базе данных. Если Я переосмысливаю sh и снова захожу в компонент, список обновляется)

Это мой код:

class GetPosts extends React.Component {
static navigationOptions = ({navigation}) => {
const {params} = navigation.state;
};
constructor(props) {
super(props);

this.state = {
  data: {},
  data2: [],
  posts: {},
  newArray: [],
  postsCount: 0,
}; 
}

componentDidMount() {
var f_id = this.props.identifier;
firebase
  .database()
  .ref('/posts/')
  .orderByKey()
  .on('value', snapshot => {
    snapshot.forEach(el => {
      if (el.val().film_id == f_id) {
        this.state.data = [
          {
            email: el.val().email,
            puid: el.val().puid,
            username: el.val().username,
            time: el.val().time,
            text: el.val().text,
          },
        ];

        this.setState({
          data2: this.state.data2.concat(this.state.data),
        });
      }
    });

    this.state.data2.forEach(obj => {
      if (!this.state.newArray.some(o => o.puid === obj.puid)) {
        this.state.newArray.push({...obj});
      }
    });

    this.setState({
      posts: this.state.newArray,
      postsCount: _.size(this.state.newArray),
    });

    console.log('valeur finale POSTS=' + this.state.posts);
  });
}

renderPosts() {
const postArray = [];
_.forEach(this.state.posts, (value, index) => {
  const time = value.time;
  const timeString = moment(time).fromNow();
  postArray.push(
    <TouchableOpacity
      onLongPress={this._handleDelete.bind(this, value.puid)}
      key={index}>
      <PostDesign
        posterName={value.username}
        postTime={timeString}
        postContent={value.text}
      />
    </TouchableOpacity>,
  );
  //console.log(postArray);
});
_.reverse(postArray);
return postArray;
}

_handleDelete(puid) {
const email = firebase.auth().currentUser.email;
let user_email = firebase.database().ref('/posts');

user_email.once('value').then(snapshot => {
  snapshot.forEach(el => {
    console.log('Userdb :' + el.val().email);
    if (email === el.val().email) {
      Alert.alert(
        'Supprimer le message',
        'Are you sure to delete the post?',
        [
          {text: 'Oui', onPress: () => this._deleteConfirmed(puid)},
          {text: 'Non'},
        ],
      );
      //console.log('Userdb :' + el.val().email);
    } else {
      //
      console.log('Usercur :' + email);
    }
  });
});
}
_deleteConfirmed(puid) {
const uid = firebase.auth().currentUser.uid;
firebase
  .database()
  .ref('/posts/' + uid + puid)
  .remove();
this.setState({
  posts: this.state.newArray.filter(user => user.puid !== puid),
});
}

render() {
return (
  <View style={styles.container}>
    <View style={styles.profileInfoContainer}>
      <View style={styles.profileNameContainer}>
        <Text style={styles.profileName}>{this.props.email}</Text>
      </View>
      <View style={styles.profileCountsContainer}>
        <Text style={styles.profileCounts}>{this.state.postsCount}</Text>
        <Text style={styles.countsName}>POSTS</Text>
      </View>
    </View>

    <ScrollView styles={styles.postContainer}>
      {this.renderPosts()}
    </ScrollView>
  </View>
);
}
}

Заранее спасибо !!

Answer 1

В нескольких местах вашего кода вы получаете доступ к this.state внутри setState, что может вызвать такие проблемы. Вы должны использовать функцию с prevProps всякий раз, когда вы получаете доступ к состоянию в setState.

Например, в пределах _deleteConfirmed:

this.setState({
  posts: this.state.newArray.filter(user => user.puid !== puid),
});

следует изменить на:

this.setSate(prevState => ({
  posts: prevState.newArray.filter(user => user.puid !== puid),
});