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 
 
    }