i want to make a request to my php page to retrieve data until the page is loaded. i made this request with axios’ this request is successful “. i want to change state in store “the state tank is successful but the change is no”. I found an error: TypeError: Cannot read property ‘props’ of undefined, at ‘componentDidMount handle succes’ level.
the code of the error page:
import React from "react";
import Axios from 'axios';
import {connect} from 'react-redux';
const mapDispatchtoprops=(dispatch)=>{
return{
load_state:(store)=>dispatch({type:"load_produit_to_state",payload:store})
}
}
const mapStateToProps =(state)=>{
return{
state,
}
};
class Produit extends React.Component{
componentDidMount(){
let request = new FormData;
request.append("getters_produit","true");
Axios.post('http://localhost/e_commerce/src/php/get.php',request).then(function(reponce){
//handle succes
this.props.load_state(reponce.data.liste_produit);
}).catch(function(error){
alert(error);
}).then(function(){
//always executed
});
}
render(){
return(<div className="les_produit">
{ console.log( this.props.state), console.log( "from props")}
</div>)}
}store page:
import {createStore} from 'redux';
const reducer =(state,action)=>{
switch(action.type){
case 'load_produit_to_state':alert(action.payload); return{ liste_produit: action.payload };
default: return state;
}
}
const initialstate = {
liste_produit:"none",
profile:"nono"
}
export default createStore(reducer,initialstate)Advertisement
Answer
componentDidMount(){
const {load_state} = this.props // You Need This
let request = new FormData;
request.append("getters_produit","true");
Axios.post('http://localhost/e_commerce/src/php/get.php',request).then(function(reponce){
//handle succes
load_state(reponce.data.liste_produit);
}).catch(function(error){
alert(error);
}).then(function(){
//always executed
});
}