删除数据后反应状态不会立即更新

Question

我在删除 POST 后更新 React Native 中的视图时遇到问题。

我认为这可能是 "state" 的问题，但不知道如何解决。

这是我的帖子列表。

当我按下某个项目时，它要求我们确认操作。

当我们确认删除操作时，POST 已从 Firebase 中删除，但视图未更新（列表中仍有 2 个项目，但数据库中只有一个。如果我刷新并重新进入组件，列表已更新）

这是我的代码：

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

您在 setState 内访问 this.state 代码中的多个位置，这可能会导致此类问题。每当您访问 setState 内的状态时，您都应该使用带有 prevProps 的函数。

例如 _deleteConfirmed:

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

应改为：

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

删除数据后反应状态不会立即更新

React state is not updated immediately after deleting data

reactjs

react-native

redux

react-state