无法将FlatList项目的详细信息传递给Modal

问题描述：

我有FlatList，我想打开Modal中的每个FlatList项目以查看详细信息。在这个例子中，我试图点击{rowData.data.display_name}来查看Modal中的{rowData.data.display_name}。我从API获取数据，当我打开Modal时，它与我点击的项目不同。我不知道如何设置项目ID以查看Modal中的相同项目？任何帮助，将不胜感激！这里是我的代码：无法将FlatList项目的详细信息传递给Modal

<FlatList 
      data={this.state._data} 
      renderItem={({item: rowData}) => { 
      return (
       <View style={styles.container}> 

       <TouchableOpacity 
       onPress={this.openModal}> 
       <Text style={styles.title}> 
        {rowData.data.display_name} 
        </Text> 
       </TouchableOpacity> 

      <Modal 
      style={styles.modal} 
     ref={(modal) => this.modal = modal} 
       coverScreen={true} 
      swipeToClose={this.state.swipeToClose} 
      onClosed={this.onClose} 
      onOpened={this.onOpen} 
      onClosingState={this.onClosingState}> 
      <Text style={styles.text}>      
      {rowData.data.display_name} 
     </Text> 
     </Modal> 
      </View> 
      ); 
      }} 
      keyExtractor={(item, index) => index} 
     />

答

在我看来，你应该把模态的FlatList之外。每次创建列表中的新项目时，您将其编码的方式都会覆盖“this.modal”。

然后，您只需接受在Modal组件内的openModal函数和renderItem上更改Modal（可能通过状态）的文本，更改onPress以从希望模型显示的容器传递信息。

  onPress={()=> this.openModal(rowData.data)}>

无法将FlatList项目的详细信息传递给Modal

相关推荐