Question

我是React的新手。我创建了一个演示应用程序。我试图在按钮单击时隐藏消息。 1）但是操作不会调用按钮单击。 2）为什么控制台在减速器内控制action时显示如下。这显示在页面重新加载。 view page

inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/PROBE_UNKNOWN_ACTION_j.r.h.g.s.q.b.y.b.9"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}

我的package.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);

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

redux.js

import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

//actions.js..............................................................................................


export const initialMessageAction = (geod) => ({

                                                    type:'INITIAL_MESSAGE',
                                                    geod,

});

export const clickButtonAction = () =>{    
                                            console.log('inside click button action');
                                            return {

                                                        type:'CLICK_MESSAGE',

                                                   }
};

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

//reducer.js.........................................................................................................

 export const geod = (state ={}, action) => {
    console.log('inside reducer');
    console.log(action);
    console.log(state)
    switch(action.type){


        case 'INITIAL_MESSAGE':
               console.log('inside reducer');
              return action.geod;
        case 'CLICK_MESSAGE':
               return [ 
                        ...state, { 
                                        message: ''
                                  }
                      ]
        default:
                return state;
    }

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

//reducer.js.........................................................................................................

    export const reducers = combineReducers({ geod, });
//.........................................................................................................

//store.js.........................................................................................................

  // export const store = createStore(reducers,  applyMiddleware(thunk));
//.........................................................................................................

export function configureStore(initialState = {}) {  
  const store = createStore(
    reducers,
    initialState,
    applyMiddleware(thunk)
  )
  return store;
};

export const store = configureStore();

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')
);

Answer 1

1）按钮事件处理程序分配中的微小错误

onClick={ () => this.props.clickButtonAction }只会返回回调而不执行任何操作

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

2）它们看起来像是linting警告

Answer 2

你的错误非常小。在你的行上：

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

你说当点击按钮时，调用返回this.props.clickButtonAction的函数。您可以通过两种方式解决它：

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

或

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

第一个将要调用的函数（this.props.clickButtonAction）传递给onClick道具。第二个传递一个函数，该函数在被调用时将调用this.props.clickButtonAction。

使用第一个更好，因为它更短并且不会创建额外的不必要的功能，但是当您想要传递自定义参数时，第二个解决方案很有用（onClick={() => innerFuction(customArgument)}）

Answer 3

只需一点便可以再次重申上述要点：

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

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

否则，如果您仅调用onClick={myFunction(myProps)}，则将在呈现按钮时调用myFunction，这是意外的。

在我的组件在渲染后继续在myFunction内部调度动作之后，发现了这一点！

动作不会调用reactjs中的按钮单击

3 个答案: