根据react-native中传递的参数设置动态状态名称
问题描述:
我是新开发的react-native。现在我正在尝试为Dart游戏“Cricket”编写一个简单的记分牌,让我的脚湿润。根据react-native中传递的参数设置动态状态名称
它基本上是一个游戏,你需要击中15-20和bullseye场3次关闭它们。如果你打3次以上,你可以收集积分。
我的第一个版本的应用程序工作,但它的丑陋,并使用大量的代码行。我为每个点场(15-20 +靶心)添加了一个函数来添加点。像:
tap20(){
this.state.indicator = "x";
if(this.state.tapped_20 > 1){
this.state.indicator = "xx";
if(this.state.tapped_20 > 2){
this.state.indicator = "xxx";
if(this.state.tapped_20 > 3){
this.state.points = 20 + this.state.points
}
}
}
this.setState({
points: this.state.points,
tapped_20: this.state.tapped_20+1,
})
}
tap19(){
this.state.indicator_19 = "x";
if(this.state.tapped_19 > 1){
this.state.indicator_19 = "xx";
if(this.state.tapped_19 > 2){
this.state.indicator_19 = "xxx";
if(this.state.tapped_19 > 3){
console.log("Ab hier Punkte..")
this.state.points = 19 + this.state.points
}
}
}
this.setState({
points: this.state.points,
tapped_19: this.state.tapped_19+1,
})
}
等..我的方法是现在用功能overgive参数。所以我只有一个函数可以根据给定的参数添加点。像这样:
<TouchableHighlight style={styles.button}
onPress={this.testfunc.bind(this, 20)}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}> 20 Test</Text>
</TouchableHighlight>
它调用的函数:
testfunc(i) {
window['this.state.indicator_' + i ] = 'test'
console.log(this.state.indicator_20)
...
当我在浏览器中调试它,它指出的console.log(this.state.indicator_20)是不确定的。
看来它不适用于this.state ......有谁知道如何解决这样的问题?
答
首先,您不应该在React Native中引用window
。考虑一下红旗。
其次,你不能以这种方式评估对象的属性:window['this.state.indicator_' + i ]
。您在名为“bar”的对象上引用了名为“foo”的属性,因此:bar['foo']
,并且不能引用任何更深的(即没有0)。
总之,反应这提供setState
:
testfunc(i) {
const update = {};
update['indicator_' + i] = 'test';
this.setState(update);
}
然后参考this.state.indicator_X
在渲染,并预期它会更新。
答
解决方法是:this.state['tapped_' + i]
或this.state['tapped_${i}']
谢谢亚当这是工作。但现在我遇到了下一个陷阱。 我想我的抽头变量设置到当前状态等在该示例: 'updatet [ 'tapped_' + I] = this.state.tapped_20 + 1;' 我试图插入变量i与不同表达式,但它返回给我一个字符串或NaN错误。例如: 'updatet ['tapped_'+ i] = ['this.state.tapped _'+ i] +1;' – RiseAgainst
@RiseAgainst对不起,'['this.state.tapped _'+ i] + 1'在JavaScript中完全是废话。请阅读[财产访问](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors)。 –