我試圖使ajax請求與按下按鈕上的react-redux,但當onClick操作嘗試從操作組件啓動功能時出現錯誤。react-redux,onClick不會啓動動作功能(undefined)
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;
}
控制檯錯誤: 遺漏的類型錯誤:this.props.getPostsData不是一個函數 這涉及到:
GetPostData(event){
event.preventDefault();
this.props.getPostsData();
}
任何幫助表示讚賞...
謝謝你,尼克!:)我知道這是愚蠢的,它是:))))作爲魔術後,我輸入正確。 – SHCodeR