Question

for(var i = 0; 2*i < this.state.showMember.length; i++) {
    <View style={{flex: 1, flexDirection: 'row'}}>
        <TouchableHighlight key={"home "+this.state.members[2*i]}
            underlayColor= { this.state.showMember[2*i] ? this.state.memberColors[(2*i)% this.state.memberColors.length] : Colors.hideScheduleColor }
            style={{
                backgroundColor: this.state.showMember[2*i] ? this.state.memberColors[(2*i) % this.state.memberColors.length] : Colors.hideScheduleColor}}
            onPress={()=>{
                let newShowMember = this.state.showMember;
                newShowMember[2*i] = !newShowMember[2*i];
                this.setState({showMember: newShowMember});
            }}>
            <Text>{ this.state.members[2*i] }</Text>
        </TouchableHighlight>
        <TouchableHighlight key={"home "+this.state.members[(2*i)+1]}
            underlayColor= { this.state.showMember[(2*i)+1] ? this.state.memberColors[((2*i)+1)% this.state.memberColors.length] : Colors.hideScheduleColor }
            style={{
                backgroundColor: this.state.showMember[(2*i)+1] ? this.state.memberColors[((2*i)+1) % this.state.memberColors.length] : Colors.hideScheduleColor}}
            onPress={()=>{
                let newShowMember = this.state.showMember;
                newShowMember[(2*i)+1] = !newShowMember[(2*i)+1];
                this.setState({showMember: newShowMember});
            }}>
            <Text>{ this.state.members[(2*i)+1] }</Text>
        </TouchableHighlight>
    </View>
}

以上是我应用程序中的代码段。我试图使TouchableHighlight的背景在每次单击时都改变颜色。这样，我有3个数组：

showMember：存储是否显示成员姓名的信息
memberColors：存储每个成员的指定颜色
members：存储成员的名字

因此，我要设置TouchableHightlight的背景颜色和底色以根据该成员的showMember值进行更改，并使用onPress函数来更改{{1 }}该成员的值。

由于我听说不是直接修改状态值的“反应方式”，所以我正在为所选成员创建一个具有更改后的布尔值的临时数组，然后将showMember的状态设置为此临时值数组。

但是，从日志中，我发现每次单击任何成员时，创建此临时数组都会追加一个新条目。我对此感到困惑，因为我只是在做showMember，它将从状态值复制数组并向其中添加新的条目。

为什么会发生这种奇怪的行为？有什么解决方法？

Answer 1

这是一个简单的解决方法：

Count

我给内部组件（for(var i = 0; 2*i < this.state.showMember.length; i++) { <View style={{flex: 1, flexDirection: 'row'}} key={`home ${i}`}> <TouchableHighlight underlayColor= { this.state.showMember[2*i] ? this.state.memberColors[(2*i)% this.state.memberColors.length] : Colors.hideScheduleColor } style={{ backgroundColor: this.state.showMember[2*i] ? this.state.memberColors[(2*i) % this.state.memberColors.length] : Colors.hideScheduleColor}} onPress={()=>{ let newShowMember = this.state.showMember; newShowMember[2*i] = !newShowMember[2*i]; this.setState({showMember: newShowMember}); }}> <Text>{ this.state.members[2*i] }</Text> </TouchableHighlight> <TouchableHighlight underlayColor= { this.state.showMember[(2*i)+1] ? this.state.memberColors[((2*i)+1)% this.state.memberColors.length] : Colors.hideScheduleColor } style={{ backgroundColor: this.state.showMember[(2*i)+1] ? this.state.memberColors[((2*i)+1) % this.state.memberColors.length] : Colors.hideScheduleColor}} onPress={()=>{ let newShowMember = this.state.showMember; newShowMember[(2*i)+1] = !newShowMember[(2*i)+1]; this.setState({showMember: newShowMember}); }}> <Text>{ this.state.members[(2*i)+1] }</Text> </TouchableHighlight> </View> }）分配了密钥，由于某种原因，它们都在TouchableHighlight为3时获得了它们的密钥，这是我的数据集循环的终止条件测试目的。通过设置外部i组件的键，我能够解决此问题。

React Native为什么我的数组大小会在没有推送的情况下增加

1 个答案: