React-native 中的数组状态更新答案

【问题标题】：Array State update in React-nativeReact-native 中的数组状态更新
【发布时间】：2016-08-05 00:38:31
【问题描述】：

我正在尝试在 React-native 中更新数组状态的特定元素。例如，我创建了 3 个 Modals，其初始可见性为 false。

这里我想用对应的Modal页面上的每个按钮独立控制3个Modal。所以我将初始状态变量“modalVisible”设置为一个长度为 3 的数组。然后，尝试使用这种命令 => this.setState({modalVisible[2]: true}) 更新 modalVisible 的一个元素，但最终无法使用此 error(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>
    );
}

【问题讨论】：

标签： arrays react-native

【解决方案1】：

您不能在setState 调用中直接修改数组索引。

您必须先修改数组，然后将其传递给setState。

setModalVisible(visible, th) {
  let modalVisible = this.state.modalVisible
  modalVisible[th] = visible
  this.setState({ modalVisible: modalVisible })
  // shorthand: this.setState({modalVisible})
}

要以不可变的方式执行此操作，您可以执行以下操作：

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

【讨论】：

【解决方案2】：

toggleExpand 是 TouchableOpacity 中按数组名称为 FirstArray 时触发的函数

 <TouchableOpacity onPress={() => this.toggleExpand(item)} /> 


 toggleExpand = (item) => {

        this.setState({ refress: !this.state.refress })

        for (i = 0; i < FirstArray.length; i++) {

            if (item.id == FirstArray[i].id) {
                { item.Visible }

                 FirstArray[i].Visible ? FirstArray[i].Visible=false :  
                 FirstArray[i].Visible=true  // modal hide and unhide in button click event 

                console.log('dacdavd',FirstArray[i].Visible);
             }
            else{

                FirstArray[i].Visible=false

            }
        }
    }

【讨论】：