bier hier bier hier - 1 month ago 5
React JSX Question

How to let my component rerender after ajax call?

I have a reactjsapp and this is part of my main component:

render() {
console.log('main=this.props.data', this.props.data);
console.log('main=this.props.userData', this.props.userData);
return (
<section className="app container">

<PacksContainer packsData={this.props.userData} ></PacksContainer>

<div className="row">
<section className="container">
</section>
</div>
</section>
);
}
}



const mapStateToProps = function (store) {
return {
data: store.datas,
userData: store.apiData
};
};

export default connect(mapStateToProps)(MainLayout);


The data from an ajax call gets injected into the props, the state logger says the state has been successfully populated from the async response. However the render() does not fire again and the props.data does not get updated, stays undefined? How can I rerender the component?

Answer

using react-redux. you have to update state from reducer.

dispatch action

let action = {type: 'YOUR_ACTION_TYPE', payload: userData}

store.dispatch(action)

reducer take state, action then return new state

from your app index where you created redux "store"

const store = createStore(reducer, initialState, ...);

your store needs a reducer which is a function that take (state, action) and return nextState

const reducer = (state, action) => {
  if(action.type === 'YOUR_ACTION_TYPE') {
    // update new state
    return Object.assign({}, ...state, {userData: action.payload})
  }
  //..
}

your connected Component will update when state changed

// this will be called when you dispatch any action and the component will update with new props
const mapStateToProps = function (state) { // new state returned from reducer
    return {
        data: state.datas,
        userData: state.apiData
    };
};
Comments