Question

我正在开发一个React应用程序，该应用程序从Firestore文档中存储的一系列对象中呈现组件。它本质上是一个社交媒体应用程序，我正在尝试开发“赞”按钮以为每个用户帖子更新Firestore文档上的“喜欢”属性。我遇到的问题是，由于“ LiveFeed”使用.map渲染了所有帖子，因此我很难告诉我的函数我要更新哪个帖子。

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

这是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);

这是我要更新独特的喜欢帖子属性的操作（第一个功能是创建帖子的功能

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

您可以将React.memo用于Post组件。这将告诉React仅在更改道具后才更新组件：

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

Answer 2

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

如何告诉我的React应用我要在Firestore中更新哪个组件？

2 个答案: