如何告诉我的 React 应用程序我想在 Firestore 中更新哪个组件？答案

【问题标题】：How can I tell my React app which component I want to update in Firestore?如何告诉我的 React 应用程序我想在 Firestore 中更新哪个组件？
【发布时间】：2023-03-26 02:11:01
【问题描述】：

我正在开发一个 React 应用程序，该应用程序从存储在 Firestore 文档中的一组对象呈现组件。它本质上是一个社交媒体应用程序，我正在尝试开发“Like”按钮来更新每个用户帖子的 Firestore 文档上的“likes”属性。我遇到的问题是，由于“LiveFeed”使用 .map 呈现所有帖子，我无法告诉我的函数我要更新哪个帖子。

我可以在我的操作中使用 firestore.update 方法来更新我的“帖子”集合中的所有 likes 属性，但我无法隔离用户会单击“like”的单个属性。

这是 POST 组件，它使用父组件中的 map 方法呈现 firestore 中帖子集合中的所有帖子

import React from 'react';
import styles from '../../scss/styles.scss';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {newLike} from '../../actions/postActions';
import moment from 'moment';

function Post(props){

  const { post, newLike } = props;
  console.log(post) //return

  function handleNewLike(post){
    const currentpost = post;
    newLike(post);
  }

    return(
      <div className="container section post">
        <div className="card post-card">
          <span className="card-title"><h5>{post.authorFirstName} {post.authorLastName}</h5></span>
          <div className="card-content center">
            <p className="black-text">{post.content}</p>
          </div>
          <div className="card-action">
            <button className="waves-effect waves-light btn" onClick={handleNewLike}>LIKE</button>
            <p>likes: {post.likes}</p>
          </div>
          <div>
              <p className="grey-text center">{moment(post.createdAt.toDate()).calendar()}</p>
          </div>
        </div>
      </div>
    );
  }

  const mapDispatchToProps = (dispatch) => {
    return{
      newLike: (post) => dispatch(newLike(post))
    }
  }

export default connect(null, mapDispatchToProps)(Post);

这是我要更新独特的 Post likes 属性的操作（第一个函数是创建帖子的功能

import * as types from './../constants/ActionTypes';

export const createPost = (post) => {
  return (dispatch, getState, {getFirebase, getFirestore}) => {
    console.log(post)
    const firestore = getFirestore();
    const profile = getState().firebase.profile;
    const authorId = getState().firebase.auth;
    firestore.collection('posts').add({
      ...post,
      authorFirstName: profile.firstName,
      authorLastName: profile.lastName,
      authorId: authorId,
      createdAt: new Date()
    }).then(()=> {
      dispatch({type: types.CREATE_POST, post});
    }).catch((err) => {
      dispatch({ type: types.CREATE_POST_ERROR, err});
    });
  };
};

export const newLike = (post) => {
  return (dispatch, getState, {getFirebase, getFirestore})  => {
    console.log(post)
    const firestore = getFirestore();
    firestore.collection('posts').doc(post.id).update({
      likes: +1
    }).then(()=> {
      dispatch({type: types.NEW_LIKE, post});
    }).catch((err) => {
      dispatch({ type: types.NEW_LIKE_ERROR, err});
    });
  };
};

这是将 Posts 数组映射到 DOM 的组件

import React from 'react';
import Post from './Post';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';



function LiveFeed(props){
  const { posts } = props;
  return(
    <div className="liveFeed">
      <div>
        {posts && posts.map(post => {
          return (
              <Link to={'/post/' + post.id} key ={ post.id }>
                <Post post={post}/>
              </Link>
          )
        })}
      </div>
    </div>
  );
}


export default LiveFeed;

【问题讨论】：

标签： reactjs firebase redux google-cloud-firestore

【解决方案1】：

您可以将React.memo 用于您的Post 组件。这将告诉 React 只有在 props 已更改时才更新组件：

const Post = React.memo(function Post(props) {
  /* only rerenders if props change */
});

【讨论】：

【解决方案2】：

我忽略了一个简单的错误，没有通过函数传递正确的参数

【讨论】：