React Native, почему мой размер массива увеличивается без push - PullRequest
Новая
       22

React Native, почему мой размер массива увеличивается без push

0 голосов
/ 18 февраля 2019 
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 s для изменения в соответствии со значением showMember для этогочлен, и имеют функции onPress для изменения значения showMember для этого члена.

Поскольку я слышал, что это не «способ реагирования» для прямого изменения значений состояния, поэтому я создаю временнуюмассив с измененным логическим значением для выбранного члена, затем устанавливающий состояние showMember для этого временного массива.

Однако из журналов я обнаружил, что создание этого временного массива будет добавлять новую запись каждый раз, когда янажмите на любого из участников.Я запутался в этом, потому что я просто делаю let newShowMember = this.state.showMember, и это скопирует массив из значения состояния и добавит в него новую запись.

Почему это странное поведение происходит и каковы некоторые способыобойти это?

1 Ответ

0 голосов
/ 26 февраля 2019

Это было простое исправление: 

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 s) и по какой-то причине все они получали свои ключи, когда i было 3,условие завершения цикла в моем наборе данных для целей тестирования.Установив ключи для внешнего компонента View, я смог решить эту проблему.

...