javascript - 如果帖子 ID 等于 action.payload，则增加点赞数

Question

我正在开发一个社交网络应用程序，我想切换特定帖子的点击次数(第一次点击时应该增加 1，再次按下时应该返回 null)。但是现在当我点击赞按钮时，没有任何反应，屏幕消失了。我无法找出我的代码有什么问题。

这是我的文件-> Action 创建器

export const fetchPosts = () => async dispatch => {
  const request = await axios.get(`${ROOT_URL}/post`, {
    headers: { Authorization: `${token}` }
  });
  dispatch({
    type: FETCH_POSTS,
    payload: request
  });
};



export const incrementLikesCount = id => {
  return {
    type: INCREMENT_LIKES_COUNT,
    payload: id
  };
};

index.js( reducer )

import auth from "./authReducer";
import user from "./userReducer";
import post from "./postReducer";

export default combineReducers({
  auth,
  user,
  post,
  form: formReducer
});

postreducer.js

import _ from "lodash";
import { FETCH_POSTS, INCREMENT_LIKES_COUNT } from "../actions/types";

const initialState = {
  postDetail: "",
  likesCount: null
};

const post = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_POSTS:
      return {
        ...state,
        postDetail: _.mapKeys(action.payload.data.data, "_id")
      };

    case INCREMENT_LIKES_COUNT:
      return _.values(state.postDetail)
        .reverse()
        .map(post => {
          if (action.payload === post._id) {
            if (state.likesCount === null) {
              console.log("I got executed");
              return { ...state, likesCount: state.likesCount + 1 };
            } else {
              return {
                ...state,
                likesCount: null
              };
            }
          } else {
            return {
              state
            };
          }
        });

    default:
      return state;
  }
};

export default post;

和我的 react 组件

import _ from "lodash";
// import uuid from "uuid";
import { connect } from "react-redux";
import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faHeart,
  faCommentAlt,
  faShareAlt
} from "@fortawesome/free-solid-svg-icons";

import { fetchPosts, incrementLikesCount } from "../../../actions/FeedPost";
import "./FeedPosts.css";

class FeedPosts extends Component {
  componentDidMount() {
    if (!this.props.fetchPosts) {
      return <div>Loading...</div>;
    }
    this.props.fetchPosts();
  }

  renderPosts = () => {
    return _.values(this.props.post)
      .reverse()
      .map(post => (
        <div key={post._id} className="post-content">
          <img
            src={require("../../../img/blue.jpeg")}
            alt="user"
            className="user-image"
          />
          <span>{post.postBy}</span>
          <span>{post.userDesignation}</span>
          <li>{post.postText}</li>
          <div className="fontawesome-icons">
            <div className="like-font">
              <FontAwesomeIcon
                icon={faHeart}
                onClick={() => this.props.incrementLikesCount(post._id)}
              />
              <span>{this.props.likesCount}</span>
            </div>
            <div className="comment-font">
              <FontAwesomeIcon icon={faCommentAlt} />
            </div>
            <div className="share-font">
              <FontAwesomeIcon icon={faShareAlt} />
            </div>
          </div>
        </div>
      ));
  };

  render() {
    return (
      <div>
        <ul className="posts">{this.renderPosts()}</ul>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  post: state.post.postDetail,
  likesCount: state.post.likesCount
});

export default connect(
  mapStateToProps,
  { fetchPosts, incrementLikesCount }
)(FeedPosts);

所以，基本上我的问题是我怎样才能增加特定帖子的点赞数，因为我能够切换点赞按钮但它增加了所有帖子的点赞数。

Answer 1

下面应该有点工作，但将 state.posts 作为数组而不是每次都从数组转换为对象再从对象转换为数组会更容易。

为确保它能正常工作，您需要在设置 state.posts

的位置显示代码

case INCREMENT_LIKES_COUNT:
  return {
    ...state,
    likesCount:state.likesCount+1,
    //not sure why posts need to be an object instead of it being an array
    posts:Object.entries(state.posts).reduce(
      (result,[key,value])=>{

        if(value._id===action.payload){
          //you probably didn't set the initial likes but the reducer
          //  where you set state.posts isn't in your question
          result[key]= {...value,likes:value.likes+1};
        }else{
          result[key]=value;
        }
        return result;
      },
      {}
    )
  }

虽然在再次看到这个之后我意识到 posts 是一个对象，其中 id 是键所以你可以让它更简单:

case INCREMENT_LIKES_COUNT:
  return {
    ...state,
    likesCount:state.likesCount+1,
    //not sure why posts need to be an object instead of it being an array
    posts:{
      ...state.posts,
      [action.payload]:{
        ...state.posts[action.payload],
        likes:state.posts[action.payload].likes+1
      }
    }
  }