在 redux 中用新的 state 更新 state

Question

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)

Answer 1

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

See This.

React - TypeError: Cannot read property 'props' of undefined

Answer 2

Try using an arrow function instead for the axios callback to preserve e context of this :

Axios.post('http://localhost/e_commerce/src/php/get.php',request).then((reponce) =>

Hopefully that helps!