React+Redux开发报错：点击点赞按钮提示addLikes不是函数

1. 核心错误：this.addLikes is not a function #

通过connect映射的action creator是挂载在组件的props上，而非组件实例的方法，所以你不能用this.addLikes，必须改成this.props.addLikes。

2. 点击事件参数不匹配 #

你在bind时传递的是dog.id，但handleClick的参数定义为dog，导致函数内拿到的是狗的ID而非对象，调用addLikes时传参逻辑混乱。直接把handleClick的参数改成dogId即可匹配传值。

3. Reducer逻辑错误 #

• 初始state设为数字0，但后续返回{...(state.likes + 1)}完全不合理：数字没有likes属性，展开语法也用错了场景。
• 每只狗需要独立的点赞计数，所以reducer的state应该是一个以狗ID为key、点赞数为value的对象，而非单一数字。

4. 按钮点赞数固定为0 #

当前按钮显示硬编码的0，需要从Redux state中读取对应狗的实时点赞数，无数据时默认显示0。

修复后的代码示例 #

DogList.js

import React, { Component } from "react";
import { dogs } from "../public/data.js";
import { addLikes } from "./actions/addLikes";
import { connect } from "react-redux";

class DogList extends Component {
  handleClick = (dogId) => {
    console.log("was clicked!");
    this.props.addLikes(dogId);
  };

  render() {
    return (
      <div>
        {dogs.map((dog) => (
          <div key={dog.id} className="dog-card">
            <p> Name: {dog.name}</p>
            <p> Breed: {dog.breed}</p>
            <p> Known For: {dog.knownFor}</p>
            <button onClick={this.handleClick.bind(this, dog.id)}>
              {this.props.likes[dog.id] || 0}
            </button>
          </div>
        ))}
      </div>
    );
  }
}

// 将Redux中的点赞数据映射到组件props
const mapStateToProps = (state) => ({
  likes: state.likes
});

export default connect(mapStateToProps, { addLikes })(DogList);

addLikes.js

// 接收狗的ID作为参数，传递给reducer
export function addLikes(dogId) {
  return {
    type: "LIKED",
    payload: dogId
  };
}

likesReducer.js

export default function likesReducer(state = {}, action) {
  switch (action.type) {
    case "LIKED":
      const dogId = action.payload;
      // 返回新对象，更新对应狗的点赞数，无数据时初始为1
      return {
        ...state,
        [dogId]: (state[dogId] || 0) + 1
      };
    default:
      return state;
  }
}

内容的提问来源于stack exchange，提问作者snerzel