如何为onClick属性分配一个带参数的redux操作？

Question

我收到一个警告，我的渲染函数的第一行为列赋值但从未使用过。

该操作将触发但有效负载持有不正确的对象。

import React from "react";
import { addCard } from "../../actions/card-actions";
import { connect } from "react-redux";

class Column extends React.Component {
    render() {
        const column = this.props.column;
        return (
            <AddCardLink onClick={column => {this.props.addCard(column)}}>
                Add new card...
            </AddCardLink>
        )
    }
}

const mapStateToProps = state => {
    return {};
};

const mapDispatchToProps = dispatch => {
    return {
        addCard: column => dispatch(addCard(column))
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Column);

我的减速机;

const cardReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CARD_DRAG":
      return onDragEnd(state, action.payload);
    case "CARD_ADD":
      console.log("action fired", action.payload);
      return {
        ...state,
        editing: true
      };
    default:
      return state;
  }
};

Answer 1

通过执行onClick={column => this.props.addCard(column) }，您没有使用先前定义的const列，您只是期望一个名为column的参数。试试这个：

onClick={ ()=> this.props.addCard(column)}

通过这种方式，您只是使用匿名函数来包装addCard，因此在组件加载后不会立即执行