react-redux,onClick不启动动作功能(undefined)

时间:2017-05-07 21:40:14

标签: javascript ajax reactjs redux react-redux

我正在尝试使用react-redux按下按钮时发出ajax请求,但是当onClick操作尝试从动作组件启动函数时出现错误。

post_data.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import getPostsData from '../actions/index';

class PostButton extends Component{

constructor(props){
    super(props);

    this.GetPostData = this.GetPostData.bind(this);
}

GetPostData(event){
    event.preventDefault();
    this.props.getPostsData();  
} 

render(){
    return(
        <div style={{marginTop: 50 + 'px'}}>
                <button className="btn btn-success" onClick={this.GetPostData}>Click Here to Load Posts</button>
        </div>
    )
  }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({getPostsData}, dispatch);
}

export default connect(null, mapDispatchToProps)(PostButton);

动作:

import axios from 'axios';

export const GET_POSTS_DATA = 'GET_POSTS_DATA';

export function getPostsData() {
   const url = `https://jsonplaceholder.typicode.com/posts`;

   const request = axios.get(url);
   console.log(request);

   return{
      type: GET_POSTS_DATA,
      payload: request
   }
}

减速机:

 import GET_POSTS_DATA from '../actions/index';

 export default function(state = [], action){
    switch (action.type){

      case GET_POSTS_DATA:
        return [action.payload, ...state]
    }

    return state;
 }

控制台错误: 未捕获的TypeError:this.props.getPostsData不是函数 这与:

有关
GetPostData(event){
    event.preventDefault();
    this.props.getPostsData();  
}

感谢任何帮助...

0 个答案:

没有答案