React-nativeの配列状態の更新

Question

React-nativeの配列状態の特定の要素を更新しようとしています。例として、最初の可視性をfalseとして3つのモーダルを作成しました。

ここでは、対応するモーダルページの各ボタンで3つのモーダルを独立して制御したいと考えています。そこで私は初期状態変数 "modalVisible"を3長さの配列として設定しました。次に、この種のコマンドでmodalVisibleの1つの要素を更新しようとしました=> "this.setState（{modalVisible [2]：true}）"、このエラーでは動作しなくなりました（Syntax Error：... Unexpected token） 。これが不可能な場合、私はこれを同等に行う方法を見つけなければなりません。たとえば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 
 
    }