bier hier bier hier - 1 year ago 82
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.userData', this.props.userData);
return (
<section className="app container">

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

<div className="row">
<section className="container">

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 does not get updated, stays undefined? How can I rerender the component?

Answer Source

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

dispatch action

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


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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download