Как назначить избыточное действие, которое принимает аргумент для атрибута onClick?

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, чтобы она не выполнялась сразу после загрузки компонента