PopupDialog在函数内调用show()失效问题求助

嘿，我一眼就看出问题出在哪了——你在循环里创建了一堆PopupDialog，但所有弹窗的ref都塞给了同一个this.popupDialog变量，这就导致最后只有最后一个弹窗的ref能被保留下来。当你在functionX里调用show()时，其实操作的是最后那个弹窗，而不是你点击的Marker对应的那个，这才会出现奇怪的显示问题。

而直接在onPress里写() => this.popupDialog.show()能暂时正常，是因为循环迭代时每次都会更新this.popupDialog为当前弹窗的ref，点击时刚好能拿到当时的ref，但这种写法非常不稳定，只要组件重新渲染，ref就会被覆盖，迟早出问题。

正确的解决思路：给每个弹窗分配独立的ref #

我们需要用一个对象或数组来存储所有弹窗的ref，确保点击Marker时能精准找到对应的弹窗：

1. 先初始化存储ref的容器 #

在组件的构造函数里（如果是类组件）创建一个对象来保存每个弹窗的ref：

constructor(props) {
  super(props);
  this.popupRefs = {}; // 用对象存储，key用每个detail的唯一标识
}

2. 修改循环中的ref赋值逻辑 #

循环创建PopupDialog时，用detail[0]（你的唯一标识）作为key，把ref存入popupRefs：

this.state.sumAll.map((detail) => (
  <View key={detail[0]}>
    <PopupDialog 
      ref={(popupDialog) => { 
        this.popupRefs[detail[0]] = popupDialog; // 绑定到对应的key上
      }} 
    >
      <View>
        <Text>Hello</Text>
      </View>
    </PopupDialog>
    <MapView.Marker 
      key={detail[0]} // 别用Math.random()当key！用固定的唯一值
      coordinate={{ 
        latitude: this.latIfUndefined(detail[0]), 
        longitude: this.lonIfUndefined(detail[1]) 
      }} 
      title={this.props.address} 
      description={``} 
      onPress={() => this.functionX(detail[0])} // 把唯一key传给functionX
      image={require('../../assets/img/1.png')} 
    />
  </View>
))

3. 调整functionX，精准调用对应弹窗 #

在functionX里，通过传入的key找到对应的弹窗，再执行show方法：

functionX = (popupKey) => {
  // 先执行你的原有业务逻辑
  // ... 这里放你原来functionX里的代码
  
  // 找到对应的弹窗并显示
  const targetPopup = this.popupRefs[popupKey];
  if (targetPopup) {
    targetPopup.show();
  }
}

额外提醒 #

• 绝对不要用Math.random()作为组件的key，这会导致组件每次渲染都被重新创建，不仅影响性能，还会让ref变得不可靠，用detail[0]这种固定的唯一值才是正确选择。
• 如果你的组件是函数组件，用useRef创建一个对象来存储ref就行：const popupRefs = useRef({})，赋值时用popupRefs.current[detail[0]] = popupDialog，逻辑和类组件一致。

这样修改后，每个Marker点击时都会触发对应的弹窗，同时也能正常执行functionX里的原有逻辑啦！

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