javascript - 单击喜欢的图标会增加其他组件的喜欢计数

Question

单击一个赞后，它会增加两个单独组件的赞数。 是什么导致两个喜欢的数字都增加了，我如何将其编码为点击一个喜欢的数字只会增加一个？

我还在下图中包含了控制台，其中控制台记录了我的 reducer 中的逻辑。您可以在图片下方找到 reducer 的代码。



reducer 代码

import { GET_GOALS, GOAL_ERROR, UPDATE_LIKES } from "../actions/types";

const initialState = {
  goals: [],
  goal: null,
  loading: true,
  error: {}
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_GOALS:
      return {
        ...state,
        goals: payload,
        loading: false
      };
    case GOAL_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    case UPDATE_LIKES:
      return {
        ...state,
        goals: state.goals.map(goal =>
          console.log("goal id", goal._id) === console.log("payload id", payload.goalId) ? { ...goal, likes: payload.likes } : goal
        ), 
        loading: false
      };
    default:
      return state;
  }
}

Action 代码

import axios from "axios";
import { GET_GOALS, GOAL_ERROR, UPDATE_LIKES } from "./types";

// Get goals

export const getGoals = () => async dispatch => {
  try {
    const res = await axios.get("/api/goal/goalfeed");

    dispatch({
      type: GET_GOALS,
      payload: res.data
    });
  } catch (error) {
    dispatch({
      type: GOAL_ERROR,
      payload: { msg: error.response }
    });
  }
};

// Add like

export const addLike = goalId => async dispatch => {
  try {
    const res = await axios.put(`/api/goal/like/${goalId}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { goalId, likes: res.data }
    });
  } catch (error) {
    dispatch({
      type: GOAL_ERROR,
      payload: { msg: error.response }
    });
  }
};

// Remove like

export const removeLike = goalId => async dispatch => {
  try {

    const res = await axios.put(`/api/goal/unlike/${goalId}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { goalId, likes: res.data }
    });
  } catch (error) {
    dispatch({
      type: GOAL_ERROR,
      payload: { msg: error.response }
    });
  }
};

目标组件代码

import React, { useEffect } from "react";
import Moment from "react-moment";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { addLike, removeLike } from "../../actions/goal";
import { getGoals } from "../../actions/goal";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import ThumbDownAltIcon from "@material-ui/icons/ThumbDownAlt";
import ChatIcon from "@material-ui/icons/Chat";
import DeleteIcon from "@material-ui/icons/Delete";
import DoneIcon from "@material-ui/icons/Done";
import {
  Typography,
  Container,
  CssBaseline,
  makeStyles,
  Grid,
  Avatar,
  Paper,
  Button
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    height: "auto",
    marginBottom: theme.spacing(3)
  },
  actionButtons: {
    marginTop: "3vh"
  },
  profileHeader: {
    textAlign: "center",
    marginBottom: 20
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const Goals = ({
  getGoals,
  auth,
  addLike,
  removeLike,
  goal: { goals, user, loading }
}) => {
  useEffect(() => {
    getGoals();
  }, [getGoals]);

  const classes = useStyles();


  return loading ? (
    <>
      <Navbar />
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Spinner />
        </div>
      </Container>
    </>
  ) : (
    <>
      <CssBaseline />
      <Navbar />
      <main>
        <Container>
          <Typography variant="h2" className={classes.profileHeader}>
            Goals
          </Typography>
          {/* parent grid */}
          <Grid container spacing={4}>
            {goals.map(singleGoal => (
              <Grid
                className={classes.paper}
                key={singleGoal._id}
                spacing={1}
                container
                item
                direction="row"
                alignItems="center"
                component={Paper}
              >
                <Grid
                  item
                  container
                  direction="column"
                  justify="center"
                  alignItems="center"
                  xs={3}
                >
                  <Avatar className={classes.avatar} src={singleGoal.avatar} />
                  <Typography variant="caption">
                    {singleGoal.first_name} {singleGoal.last_name}
                  </Typography>
                  <Typography variant="caption" className={classes.postedOn}>
                    Posted on{" "}
                    <Moment format="MM/DD/YYYY">{singleGoal.date}</Moment>
                  </Typography>
                </Grid>
                <Grid container item direction="column" xs={9}>
                  <Typography variant="body1">{singleGoal.text}</Typography>
                  <Grid item className={classes.actionButtons}>

                    <Button size="small" onClick={e => addLike(singleGoal._id)}>
                      <ThumbUpAltIcon />
                    </Button>

                    <Typography variant="caption">
                      {singleGoal.likes.length}
                    </Typography>
                    <Button
                      size="small"
                      onClick={e => removeLike(singleGoal._id)}
                    >
                      <ThumbDownAltIcon />
                    </Button>


                      <Button href={`/goal/${singleGoal._id}`} size="small">
                        <ChatIcon />
                      </Button>

                    {!auth.loading && singleGoal.user === auth.user._id && (
                      <Button size="small">
                        <DoneIcon />
                      </Button>
                    )}
                    {!auth.loading && singleGoal.user === auth.user._id && (
                      <Button size="small">
                        <DeleteIcon />
                      </Button>
                    )}
                  </Grid>
                </Grid>
              </Grid>
            ))}
          </Grid>
        </Container>
      </main>
    </>
  );
};

Goals.propTypes = {
  getGoals: PropTypes.func.isRequired,
  goal: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  goal: state.goal,
  auth: state.auth
});

export default connect(mapStateToProps, { getGoals, addLike, removeLike })(
  Goals
);

Answer 1

您的条件测试存在缺陷。

state.goals.map(goal =>
  console.log("goal id", goal._id) === console.log("payload id", payload.goalId) // What is this? it will always evaluate to true
    ? { ...goal, likes: payload.likes }
    : goal
)

console.log('EQUAL?', console.log() === console.log()); // true
console.log('EQUAL?', console.log(3) === console.log(3)); // true
console.log('EQUAL?', console.log(3) === console.log('three')); // true
console.log('EQUAL?', console.log('apple') === console.log({})); // true
console.log('EQUAL?', console.log(42) === console.log(-42)); // true

函数 console.log是一个无效的返回，即 undefined ，所以你在比较 undefined === undefined ，这总是正确的。

console.log(undefined === undefined); // true

您正在向每个目标对象传播新的“喜欢”值。

试试吧:

state.goals.map(
  goal => goal._id === payload.goalId 
    ? { ...goal, likes: payload.likes }
    : goal
)