Question

我是反应原生的新手。现在我正试图为Dart游戏编写一个简单的记分牌＆＃34; Cricket＆＃34;让我的脚湿透。

这基本上是一个游戏，你需要击中15-20和靶心场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,
})
}

等等。我现在的方法是用函数覆盖一个参数。所以我只有一个函数，它根据给定的参数添加点。像这样：

<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 ...有谁知道如何解决这样的问题？

Answer 1

首先，您永远不必在React Native中引用window。考虑一个红旗。

其次，您无法以这种方式评估对象的属性：window['this.state.indicator_' + i ]。你在一个名为“bar”的对象上引用了一个名为“foo”的属性：bar['foo']并且你不能更深入地引用（即没有bar['foo.baz']）。

无论如何，react为此提供了setState：

testfunc(i) {
  const update = {};

  update['indicator_' + i] = 'test';

  this.setState(update);
}

然后在渲染中参考this.state.indicator_X，它会按预期更新。

Answer 2

解决方案是：this.state['tapped_' + i]或this.state['tapped_${i}']

根据react-native中的传递参数设置动态状态名称

2 个答案: