В реакции onClick срабатывает, когда компонент отображается ... что делать?

Question

Я сел на вход, чтобы войти в консоль эй, если я нажму на него. Я перезагружаю страницу, ничего не трогаю, и она запускается в консоли браузера. Что это? Я пытался добавить героя в магазин, но он добавляет неопределенное, которое нельзя использовать через карту. ТАК я попробовал журнал консоли. Я узнал, что я написал выше. Что делать?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getHeroes, addHero } from '../actions/heroActions';
import PropTypes from 'prop-types';
import uuid from 'uuid';


class HeroList extends Component {
    state = {
        hero: ''
    }

    componentDidMount() {
        this.props.getHeroes();
    }

    handleChange = e => {
        this.setState({
          [e.target.name] : e.target.value
        })
    }
    addHero = hero => {
      this.props.addHero(hero);
      this.setState({hero: ''})
    }

    render() {
        return (
            <div>
                <h1>Heroes:</h1>
                <ul>
                {this.props.heroes.map(hero => 
                    (
                    <li key={hero.key}>
                        {hero.name}
                    </li>
                    )
                )}
                </ul> 

                  <input value={this.state.hero} type="text" name="hero" onChange={this.handleChange}/>
                  <input onClick={console.log('hey')} type="submit" value="add Item" />
                  <p>{this.state.hero}</p>
            </div>
        );
    }
}

HeroList.propTypes = {
    onGetHeroes: PropTypes.func.isRequired,
    hero: PropTypes.object.isRequired
}

//E-miatt lehet használni this.props ban a heroes-t
const mapStateToProps = (state) => {
  return {
    heroes: state.hero.heroes
  };
};


const mapDispatchToProps = (dispatch) => {
  return {
    onGetHeroes : () => dispatch(getHeroes())
  };
};

export default connect(mapStateToProps, {getHeroes, addHero})(HeroList);

Answer 1

Вы вызываете функцию вместо передачи функции:

onClick={console.log('hey')}

Измените ее на:

onClick={() => console.log('hey')}

Вам необходимо передать функцию на onClick. Обычный способ сделать это - определить функцию анонимной стрелки, как показано выше.