Обновление состояния массива в React-native

Question

Я пытаюсь обновить определенный элемент состояния массива в React-native. В качестве примера я создал 3 модала с его первоначальной видимостью как ложной.

Здесь я хочу независимо управлять 3 модалами с каждой кнопкой на соответствующей странице Modal. Поэтому я устанавливаю начальную переменную состояния «modalVisible» как массив с длиной 3. Затем попытался обновить один элемент modalVisible с такой командой => «this.setState ({modalVisible [2]: true})», которая в конечном итоге не работает с этой ошибкой (Синтаксическая ошибка: ... Неожиданный токен) , Если это невозможно, то я должен найти способ сделать это эквивалентно. Например, в цикле for мне нужно написать вот так: {this.state.modalVisible_ {i}}, чтобы код мог программировать, где его искать.

Ниже приведен мой текущий код.

constructor(props) { 
    super(props); 
    this.state = { 
     modalVisible: [false,false,false] 
    }; 
    } 


    setModalVisible(visible,th) { 
    this.setState({modalVisible[th]: visible}); 
    } 


    _render_modal(){ 
    var rows = []; 
    for (var i=0; i < 2; i++) { 
     rows.push(
     <View> 
     <TouchableHighlight onPress={() => { 
      this.setModalVisible(true,i) 
      }}> 
      <Text>Show Modal {i} th..</Text> 
     </TouchableHighlight> 

     <Modal 
      animationType={"slide"} 
      transparent={false} 
      visible={this.state.modalVisible[i]} 
      onRequestClose={() => {alert("Modal has been closed.")}} 
      > 
     <View style={{marginTop: 22}}> 
      <View> 
      <Text>Hello World!</Text> 

      <TouchableHighlight onPress={() => { 
       this.setModalVisible(!this.state.modalVisible[i],i) 
      }}> 
       <Text>Hide Modal</Text> 
      </TouchableHighlight> 

      </View> 
     </View> 
     </Modal> 

     </View> 

    ); 
    } 

    return(
     <View>{rows}</View> 
    ); 
    } 


render() { 
    var spinner = this.state.isLoading ? 
    (<ActivityIndicator 
      size='large'/>) : 
    (<View/>); 
    //이런건 렌더링 되자마자. 
    //dynamically modal 을 만들 수가 있나? 

    return (

     <View style={styles.container}> 
     {this._render_modal()} 
     </View> 
    ); 
} 

Answer 1

Что вы делаете, это установка из вашего массива в качестве ключа состояния вместо изменения массива в вашем состоянии.

Для достижения требуемой функциональности, я бы переписать setModalVisible функцию следующим образом:

setModalVisible(visible,th) { 
 
    const previousState = this.state.modalVisible 
 
    this.setState({ 
 
    modalVisible: [ 
 
     ...previousState(0,th), 
 
     visible, 
 
     ...previousState(th+1, previousState.length+1) 
 
    ] 
 
    }) 
 
}

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

setModalVisible(visible,th) { 
 
     let modalVisible = this.state.modalVisible 
 
     modalVisible[th] = visible 
 
     this.setState({ 
 
     modalVisible: modalVisible 
 
     }) 
 
     // could also do this.setState({modalVisible}) for short 
 
    }