3

I wonder if this is the correct solution to update the state with two dictionares

var PopulationCityView = React.createClass({
    getInitialState: function() {
        return {
            prod_diff : {'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0}
            };
    },
    componentWillMount: function() {
        this.prod_diff = {'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0};
    },
    handleM: function(res,child_new_res_diff){
        var new_prod_diff = this.prod_diff;
        new_prod_diff[res] = child_new_res_diff;
        this.setState({prod_diff:new_prod_diff});
    },
    render: function(){
........

if anyone knows of a better and faster solution would ask for a hint...

2 Answers 2

3

Much safer and more efficient way is to keep your state as simple object with primitive values:

var PopulationCityView = React.createClass({
    getInitialState: function() {
        return {
            wheat: 0,
            meat: 0,
            fish: 0,
        };
    },
    handleM: function(res,child_new_res_diff){
        var new_state = {};
        new_state[res] = child_new_res_diff;
        this.setState(new_state);
    },
    render: function() { /* your render code */ }
});

If you really have to store your values in nested object you have to remember to clone nested object before modifying it:

var PopulationCityView = React.createClass({
    getInitialState: function() {
        return {
            prod_diff: { wheat: 0, meat: 0, fish: 0 }
        };
    },
    handleM: function(res,child_new_res_diff){
        var new_prod_diff = _.clone(this.state.prod_diff);
        new_prod_diff[res] = child_new_res_diff;
        this.setState({ prod_diff: new_prod_diff });
    },
    render: function() { /* your render code */ }
});

I've made your initial state a little smaller to simplify code examples.

Also consider using React Immutability Helpers which makes operating on nested objects inside state safer.

2
  • 3
    Never directly modify this.state. You can just as easily pass a nested object to setState, and not have to worry about hacking the API with a call to forceUpdate.
    – couchand
    Jan 5, 2015 at 15:31
  • 1
    @couchand That's why I suggested first solution as better one but there are always some edge cases. However you are right that forceUpdate is dangerous, so I corrected my second solutions.
    – daniula
    Jan 5, 2015 at 15:51
0

I forgot to add that handleM function arguments are sent by the child. In my solution it does not work smoothly (slider that adjusts the prod_diff jams), the same effect is when I apply the solution @daniula Now I have decided to make use of CortexJS and everything runs smoothly I would ask to correct me if I used this library incorrectly:

PARENT

var PopulationCityView = React.createClass({
    getInitialState: function() {
        return {
            prod_diff_C : new Cortex({'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0}),
            };
    },
    componentWillUnmount: function() {
        delete this.state.prod_diff_C;
    },
    componentDidMount: function(){
        var that = this;
        this.state.prod_diff_C.on("update",function (updatedRes) {that.setState({prod_diff_C: updatedRes});});
    },
    // handleM: function(res,child_new_res_diff){
        // var new_prod_diff = this.prod_diff;
        // new_prod_diff[res] = -child_new_res_diff;
        // this.setState(new_prod_diff);
    // },
    render: function(){
        var foods = {}, goods = {};
        for(var g = 0; g< this.goods.length; g++){
            R = this.goods[g];
            goods[R] =  <div style={{display:"inline-block"}}>
                    <CHILD_1 res_par={this.props.data.res_uses[R]} res={R} prod_diff_cortex={this.state.prod_diff_C}/>
                    <SLIDER prod_diff_cortex={this.state.prod_diff_C} res={R} res_have={this.props.data.res_uses[R][0]} res_need={this.props.data.res_uses[R][1]} />
                </div>
        }

        }
        return (    ....    )
    }
})

CHILD_1

var CHILD_1 = React.createClass({
    render: function(){
        var val = this.props.res_par[3] + this.props.prod_diff_cortex[this.props.res].getValue()
        return (
            <div className='population-production-upkeep'>              
                {val}
            </div>
        )
    }
})

SLIDER

var SLIDER= React.createClass({ 
 ......
  handleMouseDown: function(event){
    var start_val = this.props.res_have + this.props.prod_diff_cortex[this.props.res].getValue()
    this.val_start = start_val;
    this.res_diff_start = this.props.prod_diff_cortex[this.props.res].getValue()
    this.touched = 1;
    this.pos_start_x = event.screenX;
    this.prev_pos_x = this.width_step * start_val;
    event.stopPropagation();
    event.preventDefault();
  },
  handleMouseMove: function(event){
    if(this.touched) {
        var x_diff = event.screenX - this.pos_start_x  ;
        var x = this.prev_pos_x + x_diff;
        if (x < 0) x = 0;
        if (x >  this.state.max_pos_x) x = this.state.max_pos_x;
        var stor = Math.round(x* 100 / this.width_step ) / 100
        var new_res_diff =  this.res_diff_start + stor - this.val_start;
        this.props.prod_diff_cortex[this.props.res].set(new_res_diff)
    }
  },
 ......
  render: function() {
    var val = Math.round((this.props.res_have+this.props.prod_diff_cortex[this.props.res].getValue())*100)/100;
    return (
                ..../* slider render */
    );
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.