我想知道这是否是使用两个词典来更新状态的正确解决方案
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(){
........
如果有人知道更好更快的解决方案会要求提示......
答案 0 :(得分:2)
更安全,更有效的方法是将状态保持为具有原始值的简单对象:
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,这使得对状态内的嵌套对象进行操作更安全。
答案 1 :(得分: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 ( .... )
}
})
<强> 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 */
);
}
});