Увеличьте количество лайков, если идентификатор поста равен action.payload

Question

Я работаю в приложении для социальной сети и хочу переключать счетчик кликов при клике (при первом нажатии он увеличивается на 1, а при повторном нажатии должен возвращаться к нулю, если снова нажата).Но теперь, когда я нажимаю кнопку «Мне нравится», ничего не происходит, и экран исчезает.Я не могу понять, что не так с моим кодом.

Вот мои файлы-> Создатель действий

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 (редуктор)

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;

и мой реагирующий компонент

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

Хотя, увидев это снова, я понимаю, что записи - это объект, где 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
      }
    }
  }