Как я могу сообщить своему приложению React, какой компонент я хочу обновить в Firestore?

Question

Я работаю над приложением React, которое визуализирует компоненты из массива объектов, хранящихся в документе Firestore. По сути, это приложение для социальных сетей, и я пытаюсь разработать кнопку «Мне нравится», чтобы обновить свойство «лайки» в документе firestore для каждого сообщения пользователя. Проблема, с которой я сталкиваюсь, заключается в том, что поскольку LiveFeed отображает все сообщения с использованием .map, у меня возникают проблемы с сообщением моей функции, какую публикацию я хочу обновить.

Я могу использовать метод firestore.update в своем действии, чтобы обновить все свойства likes в моей коллекции «posts», но я не могу выделить ни одного, на который пользователь нажимал бы «like».

Вот компонент POST, который отображает все записи из коллекции сообщений в 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);

Вот действие, в котором я хочу обновить уникальное свойство «Нравится пост» (первая функция - это то, что создает сообщение

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});
    });
  };
};

Вот компонент, который отображает массив сообщений в 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

Я пропустил простую ошибку и не передал правильный аргумент через функцию

Answer 2

Вы можете использовать React.memo для компонента Post.И это скажет React обновить компонент, только если реквизиты были изменены:

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