如何告訴我的React app我想在Firestore中更新哪個組件？

Question

我正在開發一個React應用程序，該應用程序從存儲在Firestore文檔中的對象數組中呈現組件。 它本質上是一個社交媒體應用程序，我正在嘗試開發“贊”按鈕來更新每個用戶帖子的firestore文檔上的“贊”屬性。 我遇到的問題是，由於'LiveFeed'使用.map呈現所有帖子，我無法告訴我的功能我要更新哪個帖子。

我可以在我的操作中使用firestore.update方法來更新我的“posts”集合中的所有likes屬性，但是我無法隔離用戶單擊“喜歡”的單個屬性。

這是POST組件，它使用父組件中的map方法從firestore中的post集合中呈現所有帖子

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喜歡屬性的動作（第一個功能是創建帖子的內容

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;

Answer 1

您可以將React.memo用於Post組件。 這將告訴React僅在更改道具時才更新組件：

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

Answer 2

我忽略了一個簡單的錯誤，並沒有通過函數傳遞正確的參數