操作不调用reactjs中的按钮单击

我是新来的。我创建了一个演示应用程序。我试图通过点击按钮隐藏消息。1） 但该操作不需要单击按钮。2） 当控制台在减速机内执行

操作时，为什么控制台显示如下。这显示在第页的“重新加载”

mypackage.json

{
  "name": "react-redux-data-flow",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { initialMessageAction, clickButtonAction } from './redux.js';
import { connect } from 'react-redux';


class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">        
        </div>
        <p className="App-intro">
        react-redux-data-flow
        </p>
             {this.props.message? <div>hi ..<button onClick={ () => this.props.clickButtonAction }>hide message</button></div>: ''}
      </div>
    );
  }
}

// mapStateToProps.........................................................................................................

   const mapStateToProps = (state, ownProperty) => ({ 

    message:state.geod

  });
//...............................................................................................................................


// DispatchStateToProps.........................................................................................................

   const mapDispatchToProps =  { 

    // initialMessageAction,
    clickButtonAction

  }

// connect to Store...............................................................................................................................

  export default connect(
                             mapStateToProps,
                             mapDispatchToProps

                    )(App);

// .....................................................................................................................................................................

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
// Add these imports - Step 1
import { Provider } from 'react-redux';  
import { store } from './redux';
// ReactDOM.render(<App />, document.getElementById('root'));
// registerServiceWorker();

// Wrap existing app in Provider - Step 2
ReactDOM.render(  
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
导入“./index.css”；
//添加这些导入-步骤1
从'react redux'导入{Provider}；
从“/redux”导入{store}；
//ReactDOM.render（，document.getElementById（'root'））；
//registerServiceWorker（）；
//在提供商中包装现有应用程序-步骤2
ReactDOM.render（
,
document.getElementById（'root'））
);
1）按钮事件处理程序分配中的微小错误

onClick={（）=>this.props.clickButtonAction}
将只返回回调而不执行任何操作

onClick={this.props.clickButtonAction}
将回调指定为事件处理程序

2） 它们看起来就像是绒毛警告
您的错误非常小。在您的电话线上：

<button onClick={() => this.props.clickButtonAction}>...

或

this.props.clickButtonAction（）}>。。。

第一个函数将要调用的函数（
this.props.clickButtonAction
）传递到
onClick
属性中。第二个函数传递一个函数，调用该函数时，该函数将调用
this.props.clickButtonAction

最好使用第一个解决方案，因为它比较短并且不会创建额外的不必要的函数，但是当您想要传递自定义参数（
onClick={（）=>innerfaction（customArgument）}
）时，第二个解决方案非常有用。
请注意重新迭代上面提到的一点：

如果要将自定义道具传递给函数，则需要使用以下格式：

onClick={() => myFunction(myProps)}

否则，如果只调用
onClick={myFunction（myProps）}
，则在呈现按钮时将调用myFunction，这是意外的

在我的组件在渲染时不断在myFunction内部调度操作之后发现了这一点
 您发布的日志只是来自Redux的日志，用于让您知道正在调度哪些操作。此处记录的操作来自Redux本身，在初始化存储时进行调度。现在，reducer中的
clickButtonAction
操作在button click上调用。但在第一次单击按钮时返回的对象是
{}
。在第二次单击按钮时返回对象
inside reducer redux.js:30对象{type:“CLICK_MESSAGE”}redux.js:31对象{}redux.js:29 inside reducer redux.js:30对象{type:“CLICK_MESSAGE”}redux.js:31[Object]
但是消息和按钮仍然显示我认为您可能误解了存储的行为，因为您的日志记录有点混乱。修复日志记录或添加到存储中，以便更好地查看每个操作如何更改状态。
npm install redux logger
done。现在可以记录上一个状态、操作和下一个状态了。@alenchill我使用了
'redux-thunk
中间件。需要从动作创造者那里调用减缩器吗？@sojan不，像你这样的基本动作创造者不需要它。redux thunk可以在一次调用中向操作创建者发送多个操作，并且在执行异步网络调用时经常使用redux thunk多次更新存储状态，以跟踪我们（a）是否正在等待响应，（b）是否已收到响应或（c）是否已收到错误。不是我，谢谢@ArneHugo，但是是的，你实际上并没有在任何地方使用thunks，你也不会手动调用减速机，这是redux的工作。由于您的问题现在看起来像是您的减速机返回了CLICK_消息的混乱状态，它应该返回空字符串，以便分配到组件正在使用的
state.geod
<button onClick={() => this.props.clickButtonAction}>...

<button onClick={this.props.clickButtonAction}>...

<button onClick={() => this.props.clickButtonAction()}>...

onClick={() => myFunction(myProps)}