我正在尝试使用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();
}
感谢任何帮助...