React-native中的陣列狀態更新

Question

我試圖在React-native中更新陣列狀態的特定元素。作爲一個例子，我創建了3個Modals，其初始可見性爲false。

在這裏，我想獨立控制與相應的Modal頁面上的每個按鈕3 Modals。所以我將初始狀態變量「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

你在做的是將你的Array設置爲狀態鍵，而不是修改你的狀態中的數組。

爲了實現所期望的功能，我已經重寫你的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 
 
    }