3

これが2つの辞書で状態を更新する正しい解決策なのだろうか

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(){
........

誰かがより良い、より速い解決策を知っているなら、ヒントを求めます...

4

2 に答える 2

3

より安全で効率的な方法は、状態をプリミティブ値を持つ単純なオブジェクトとして保持することです。

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 */ }
});

ネストされたオブジェクトに値を本当に保存する必要がある場合は、ネストされたオブジェクトを変更する前に複製することを忘れないでください。

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 */ }
});

コード例を単純化するために、初期状態を少し小さくしました。

また、ステート内のネストされたオブジェクトの操作をより安全にするReact Immutability Helpersの使用を検討してください。

于 2015-01-05T15:20:47.417 に答える
0

handleM 関数の引数が子によって送信されることを追加するのを忘れていました。私のソリューションではスムーズに動作しません(prod_diffジャムを調整するスライダー)、ソリューションを適用すると同じ効果があります@daniula今、私はCortexJSを利用することに決めました。すべてがスムーズに実行されます。このライブラリは間違っています:

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 (    ....    )
    }
})

子_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>
        )
    }
})

スライダー

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 */
    );
  }
});
于 2015-01-05T20:50:10.730 に答える