React中如何仅为视觉效果更新state？解决删除后状态重置问题

我懂你的困扰——删除帖子后你想把selectedPost设为null来显示提示，但componentDidUpdate因为props.id还保留着旧值，又会重新请求数据覆盖掉null，导致提示没法正常展示。这里有两种实用的解决办法：

方法一：让父组件清除选中的帖子ID（推荐） #

问题的核心在于删除后props.id依然是之前选中的帖子ID，所以componentDidUpdate会继续触发请求。最合理的做法是删除后通知父组件清空这个ID，这样props.id就会变成null，componentDidUpdate里的请求逻辑就不会执行了。

步骤1：修改FullPost组件的onDeleteClick方法 #

添加一个通知父组件的回调：

onDeleteClick = () => {
  this.props.deletePost(this.state.selectedPost.id);
  // 通知父组件清除选中的帖子ID
  this.props.onPostDeleted();
  this.setState({ selectedPost: null });
}

步骤2：在父组件中实现清除ID的逻辑 #

假设父组件里用selectedPostId控制选中的帖子ID，添加处理删除后的方法并传递给FullPost：

// 父组件中的方法
handlePostDeleted = () => {
  this.setState({ selectedPostId: null });
}

// 渲染FullPost时传递回调
<FullPost 
  id={this.state.selectedPostId} 
  deletePost={this.deletePost} 
  onPostDeleted={this.handlePostDeleted} 
/>

这样删除后，父组件的selectedPostId变为null，FullPost的props.id也会同步变成null，componentDidUpdate里的if (this.props.id)条件不满足，就不会重新请求数据，selectedPost保持null，提示就能正常显示了。

方法二：修改componentDidUpdate的判断逻辑（无需修改父组件） #

如果你不想改动父组件，可以调整componentDidUpdate的触发条件，只有当props.id发生变化时才请求数据，而非只要selectedPost为null就请求：

componentDidUpdate(prevProps) {
  // 只有当props.id和之前的取值不一样时，才重新请求数据
  if (this.props.id !== prevProps.id) {
    if (this.props.id) {
      axios.get('https://jsonplaceholder.typicode.com/posts/' + this.props.id)
        .then(response => {
          this.setState({ selectedPost: response.data })
        });
    } else {
      this.setState({ selectedPost: null });
    }
  }
}

这样删除后，props.id没有变化（还是之前的ID），所以componentDidUpdate不会触发请求，selectedPost保持null，就能显示提示了。不过这种方法有个小局限：如果用户删除后再次点击同一个帖子ID，因为props.id没变化，不会重新请求数据，selectedPost还是null，需要额外处理这种场景。

总的来说，方法一更符合组件间的数据流动逻辑，推荐优先使用~

内容的提问来源于stack exchange，提问作者Tanvir Rahman