React Native：解决FlatList内Modal多次弹出问题

问题根源 #

你的代码中Modal被放在了FlatList的renderItem方法内部，这意味着FlatList的每一个列表项都会渲染一个独立的Modal组件，而所有这些Modal都共用同一个modalVisible状态。当请求成功后调用setModalVisible(!modalVisible)时，所有列表项的Modal都会因为状态变为true而同时显示，从而出现逐个弹出的现象。

解决方案 #

1. 使用全局唯一Modal实例

将Modal组件从renderItem内部移到FlatList外部，确保整个页面只存在一个Modal实例，这样状态变化时只会触发这一个Modal显示。

2. 调整状态更新逻辑

打开Modal时直接设置setModalVisible(true)，而非取反操作，避免多次点击或异步请求返回时的状态混乱。如果需要针对不同列表项展示不同内容，可以维护一个额外状态存储当前激活的列表项数据。

修改后的代码示例 #

完整组件代码

import React, { useState } from 'react';
import { View, FlatList, Button, Modal, Alert, StyleSheet } from 'react-native';
import axios from 'axios';

const YourComponent = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentItemData, setCurrentItemData] = useState(null); // 存储当前触发的列表项数据（可选）
  const BASE_URL = '你的接口地址';
  const newPost = []; // 你的列表数据源

  const handleSubmit = (values) => {
    const formData = {
      firstN: values.firstN,
      secondN: values.secondN,
      thirdN: values.thirdN,
      firstT: values.firstT,
      secondT: values.secondT,
      thirdT: values.thirdT,
      event: values.event,
      date: "2027-12-12 19:10:00",
      description: values.description,
      type: values.type,
      gender: values.gender,
    };

    axios.post(`${BASE_URL}pastevents/post`, formData)
      .then(data => {
        console.log("success");
        setCurrentItemData(values); // 保存当前项数据，用于Modal展示（可选）
        setModalVisible(true); // 直接设置为true，避免状态切换混乱
      })
      .catch(err => console.log(err));
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={newPost}
        renderItem={({ item, index }) => (
          <View style={styles.listItem} key={item._id}>
            {/* 列表项的其他内容 */}
            <Button
              style={[styles.buttons, styles.buttonClose]}
              onPress={() => handleSubmit(item.values)} // 传递当前项的values
              disabled={!item.isValid} // 注意isValid需绑定到当前列表项
              title="Share"
            />
          </View>
        )}
        keyExtractor={item => item._id}
      />

      {/* 全局唯一的Modal */}
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
            setModalVisible(false); // 关闭时直接设为false
          }}
        >
          <View style={styles.modalView}>
            {/* 可使用currentItemData渲染对应内容 */}
            <Button title="Close Modal" onPress={() => setModalVisible(false)} />
          </View>
        </Modal>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  buttons: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  buttonClose: {
    backgroundColor: '#2196F3',
  },
});

export default YourComponent;

关键注意点

• 禁止在renderItem内部渲染Modal，避免生成多个Modal实例
• 打开Modal时使用setModalVisible(true)替代取反操作，防止异步请求多次返回时的状态异常
• 如果需要在Modal中展示当前列表项的内容，通过currentItemData状态传递数据，确保Modal内容与触发的列表项对应

内容的提问来源于stack exchange，提问作者nadun channa