javascript - ReactJs - Child not updating after Parent State changed - Stack Overflow

admin管理员组

文章数量:1392003

Im new in ReactJS and I'm having problem with the concept of state and re-render of ponent.

In my parent ponent, I have this state in constructor:

this.state = {
        locale : 'en',
        messages : ENGLISH.messages,
        softwareInfo : {
                        software_name : 'Test Default 1.0',
                        default_dash : 1,
                        color_theme: '#009900'
                       }
    }

In the Render, I load a ponent called DashAppBar passing the softwareInfo:

<DashAppBar softwareInfo = { this.state.softwareInfo} />

In DashAppBar construct, I read that state as property:

this.state = {
       software_settings: props.softwareInfo,
       [...]
}

And then I print the software name in the bar with this:

const software_name = ( 
            <FormattedMessage 
                id="software_name" 
                defaultMessage="{software_name}"
                values={{software_name:this.state.software_settings.software_name}}
            />
        );

This work fine.

Unfortunally, parent ponent make an AJAX call that change softwareInfo:

success: function(result){
        //window.software_settings = $.parseJSON(result);
        //window.software_settings = result;
        var settings = {
                          software_name:result.software_name,
                          default_dash:result.default_dash,
                          color_theme:result.color_theme
                       };
        this.setState({softwareInfo : settings});
}

Calling setState should re-render the ponent but the child value remain the same as original and the new value got from AjaxCall are not displayed.

Where is the error? Change the parent state should update the child.

Thanks!

Im new in ReactJS and I'm having problem with the concept of state and re-render of ponent.

In my parent ponent, I have this state in constructor:

this.state = {
        locale : 'en',
        messages : ENGLISH.messages,
        softwareInfo : {
                        software_name : 'Test Default 1.0',
                        default_dash : 1,
                        color_theme: '#009900'
                       }
    }

In the Render, I load a ponent called DashAppBar passing the softwareInfo:

<DashAppBar softwareInfo = { this.state.softwareInfo} />

In DashAppBar construct, I read that state as property:

this.state = {
       software_settings: props.softwareInfo,
       [...]
}

And then I print the software name in the bar with this:

const software_name = ( 
            <FormattedMessage 
                id="software_name" 
                defaultMessage="{software_name}"
                values={{software_name:this.state.software_settings.software_name}}
            />
        );

This work fine.

Unfortunally, parent ponent make an AJAX call that change softwareInfo:

success: function(result){
        //window.software_settings = $.parseJSON(result);
        //window.software_settings = result;
        var settings = {
                          software_name:result.software_name,
                          default_dash:result.default_dash,
                          color_theme:result.color_theme
                       };
        this.setState({softwareInfo : settings});
}

Calling setState should re-render the ponent but the child value remain the same as original and the new value got from AjaxCall are not displayed.

Where is the error? Change the parent state should update the child.

Thanks!

• javascript
• reactjs

Share Improve this question Follow asked Jan 29, 2018 at 13:35 RetroMimeRetroMime 38722 gold badges99 silver badges2424 bronze badges 2

• Ajax call gets triggered correctly ? – Mosè Raguzzini Commented Jan 29, 2018 at 13:39
• Unless you are going to mutate that property in the child ponent, don't put it in State. Instead just read it straight from props. – tgallacher Commented Jan 29, 2018 at 13:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The issue is that you're passing the parent's state only in the child's constructor. If the parent updates props you either need to do ponentWillReceiveProps and update the child state or just use the software_settings as prop directly.

For example, in the child ponent:

const software_name = ( 
            <FormattedMessage 
                id="software_name" 
                defaultMessage="{software_name}"
                values={{software_name:this.props.software_settings.software_name}}
            />
        );

or with ponentWillReceiveProps:

ponentWillReceiveProps(nextProps) {
    this.setState({ software_settings: nextProps.software_settings});
}

you need to set a ponentWillReceiveProps hook on your child ponent to updated it. https://reactjs/docs/react-ponent.html#ponentwillreceiveprops

本文标签： javascriptReactJsChild not updating after Parent State changedStack Overflow