settings are only applied on first render

[searler]

I created a generic editor component, where both the data and the settings are retrieved using Ajax.
The standard React Ajax initialization pattern is used.

The initial setting value was {}. The react-json code correctly displays the data retrieved by the Ajax call but ignores the corresponding new setting value.

Generating a placeholder for the initial render before the Ajax call responds is one way to workaround the problem.

var React = require('react');
var RxDom = require('rx-dom');
var Editor = require('react-json');


class JsonUpdate extends React.Component {

    constructor(props) {
        super(props);
        this.name = props.name;

        this.state = {
            value: {},
            settings: {}
        };
    }

    componentDidMount() {
        Rx.DOM.ajax("/status/" + name)
            .subscribe(
            function (data) {
                var info = JSON.parse(data.response);
                this.setState({
                    value: info.data,
                    settings: info.settings
                });

            }.bind(this),
            function (error) {
                console.log(error);
            }
        );
    }

    postChange(value) {
        var str = JSON.stringify(value);
        Rx.DOM.ajax({url: "/apply/" + name, body: str, method: "POST"})
            .subscribe(
            function (data) {
            },
            function (error) {
                console.log(error);
            }
        );
    }

    render() {

        if (Object.getOwnPropertyNames(this.state.settings).length == 0)
            return <div />;
        else
            return (
                <Editor value={this.state.value} settings={this.state.settings} 
                      onChange={this.postChange}></Editor>);

    }
}

module.exports = JsonUpdate;