时间戳

首页 > 解决方案 > 如何使用 react.js 按钮修改特定的 Firestore 文档？

reactjs - 如何使用 react.js 按钮修改特定的 Firestore 文档？

问题描述

我编写了一个 react.js 聊天室，它为每条消息创建一个新的 firestore 文档。每条消息都有三个字段：UID（来自 google）、文本和 createdAt。然后为每个文档显示文本和 UID，按 createdAt 排序。我现在正在尝试在每条消息和一个计数器旁边创建一个类似按钮。

我likeCount为每条消息添加了一个字段。它最初为 0 并显示在文本旁边。

这看起来像这样：

function ChatMessage(props) {
  const { text, uid, likeCount } = props.message;

  const messageClass = uid === auth.currentUser.uid ? 'sent' : 'received';
  
  return (<>
    <div className={`message ${messageClass}`}>
      <img src={photoURL || 'https://api.adorable.io/avatars/23/abott@adorable.png'} />

      
      <div className = "likeCount">

        <button onClick={something?}className="likeCount">
        
        </button>
      </div>
      <p>{likeCount}</p>
      <p>{text}</p>
    </div>
  </>)
}

所以......我怎样才能让每个按钮在相应的文档中添加一个“喜欢”？

感谢您的任何帮助和见解。我是 react.js 的新手！

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

您可以在生命周期方法中从 firestore 加载您的点赞数，很可能是 incomponentDidMount和 in componentDidUpdate。您可以将用于更新喜欢的方法ChatMessage从父组件传递给功能组件。您在聊天消息组件中的按钮如下所示： <button onClick={props.addLike} className="likeCount"> 以及您的父组件的示例：

constructor(props) {
     this.state = {
           chatMessages: []
     }
}

async componentDidMount() {
    const chatMessages = (await chatMessages.get()).data();
    this.setState({ chatMessages });
}

addLike(doc) {
      doc.update({likeCount: doc.likeCount + 1});
}

render() {
     return (
         this.state.chatMessages.map((chatMessage) => {
              return (
                 <ChatMessage 
                      chatMessage={chatMessage} 
                      addLike={this.addLike}
                 />
              )
          }
      )
}

请记住，这与您将要执行的操作类似，但并不完全一样。考虑这个伪代码。

推荐阅读