如果在反应中进行更新，则更改内容？答案

【问题标题】：change content if update is made in react?如果在反应中进行更新，则更改内容？
【发布时间】：2020-04-28 19:11:51
【问题描述】：

我正在使用带有 react 的 firebase 来获取一些帖子。如果使用 react 有任何变化，我想实时更新屏幕上的帖子。

我这样打印这篇文章：

  return (
    <>
      {posts.map((post, index) => {

//firebase to check updates
var postref = firebase.database().ref('/posts/' + post.key).orderByKey();
postref.on("value", function(snap) {
    var changedPost = snap.val();
    console.log("The updated post title is " + changedPost.titulo);
});

        return <Post key={post.key} id={post.key} ref={ref} img={post.img} titulo={post.titulo} />

      })}
    </>
  )
}

在中间我有 firebase，检查是否有任何更新，例如是否有人编辑了标题。它正在工作，console.log 如果它改变了标题。

问题是，如何使用 react 将这个编辑后的标题实时更新给用户？我应该创建一个状态吗？每个帖子的状态数组？如果发生任何更改，我该怎么做才能更新 post.titulo？

谢谢

【问题讨论】：

你查过includeMetadataChanges，firebase.google.com/docs/firestore/query-data/listen
@HagaiHarari 感谢您的回答。我正在使用 firebase 并且可以很好地获取实时更新，如果有人更新帖子，console.log 将打印新标题。我只需要知道如何向用户展示这个，用新标题更新屏幕上的帖子。

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

为了使 react 组件重新渲染，您需要更改状态或 props 以使其使用新的上下文再次绘制 UI。我不确定posts 到底是什么以及如何获取它（也许使用自定义钩子是最好的做法......），但添加了一种可能的方法来做到这一点

 const [ uiPosts, setUIposts ] = useState({})

 {posts.map((post, index) => 
    setUIposts({...uiPosts, [post.key]: ...post})
    var postref = firebase.database().ref('/posts/' + post.key).orderByKey();
  postref.on("value", function(snap) {
    setUIposts({...uiPosts, [post.key]: ...post})
});

    return <Post  titulo={uiPosts[post.key].titulo} />

  })}

【讨论】：

非常感谢，我试试！