Question

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

这里我想用相应的Modal页面上的每个按钮独立控制3个Modals。所以我设置了初始状态变量＆＃34; modalVisible＆＃34;作为一个3长度的数组。然后，尝试用这种命令更新modalVisible的一个元素=＆gt; ＆＃34; this.setState（{modalVisible [2]：true}）＆＃34;，最终无法处理此错误（语法错误：...意外的令牌）。如果这是不可能的，那么我必须找到相同的方法。例如在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
    }

Answer 2

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

 <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

            }
        }
    }

React-native中的数组状态更新

2 个答案: