React Redux状态已复制但组件未重新渲染，问题排查咨询

嘿，我来帮你排查下这个问题！你遇到的核心问题是：组件初始化时加载了帖子列表，但添加新帖子后没有更新本地状态里的帖子数据，导致React不知道要重新渲染组件。

咱们一步步来解决：

1. 先确保帖子列表存在组件状态中 #

你的组件状态里目前没有存储帖子列表的字段，得先加上：

state = {
  open: false,
  body: '',
  id: '',
  posts: [] // 新增这个状态，用来存所有帖子
}

2. 初始化时获取帖子并更新状态 #

你原来的componentWillMount应该是用来拉取帖子数据的，记得把获取到的数据更新到posts状态里（另外提一句：React 16.3+里componentWillMount已经过时，推荐用componentDidMount）：

componentDidMount() {
  // 假设你用fetch请求后端接口
  fetch('/api/posts')
    .then(res => res.json())
    .then(fetchedPosts => {
      this.setState({ posts: fetchedPosts })
    })
}

3. 添加帖子成功后，更新本地状态 #

当你提交新帖子成功后，别只关闭模态框，要把新帖子同步到本地的posts状态里，这样React才会触发重新渲染。有两种常用方式：

• 方式一：直接把新帖子加到现有列表（无需重新请求）
  如果后端返回了新创建的帖子数据，直接把它加到posts数组的开头或末尾：

  handleSubmit = () => {
    const { body } = this.state;
    // 提交新帖子到后端
    fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ body })
    })
    .then(res => res.json())
    .then(newPost => {
      // 用setState更新posts，把新帖子加到最前面
      this.setState(prevState => ({
        posts: [newPost, ...prevState.posts],
        open: false,
        body: ''
      }))
    })
  }
  

• 方式二：重新请求完整的帖子列表
  如果后端没有返回新帖子，或者你需要确保拿到最新的全量数据，可以重新调用一次获取帖子的接口：

  handleSubmit = () => {
    const { body } = this.state;
    fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ body })
    })
    .then(() => {
      // 重新获取所有帖子
      fetch('/api/posts')
        .then(res => res.json())
        .then(fetchedPosts => {
          this.setState({
            posts: fetchedPosts,
            open: false,
            body: ''
          })
        })
    })
  }
  

4. 关键提醒：别直接修改状态 #

绝对不要直接操作this.state.posts（比如this.state.posts.push(newPost)），这种方式不会触发React的重新渲染机制，必须通过setState来更新状态。

总结一下：只要在添加帖子成功后，通过setState更新组件里的posts状态，组件就会自动重新渲染，新帖子也就会显示出来啦！

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