Stimulus.js在TargetConnected赋值的变量在action中undefined如何解决？

问题原因 #

核心是Stimulus控制器的回调执行时序和target识别问题：

1. mapTargetConnected回调只有当页面中存在data-location-target="map"属性的元素、且该元素成功挂载到控制器所属的DOM树时才会触发。如果该元素拼写错误、或者在表单提交动作触发后才动态插入DOM，这个回调就不会执行，this.name自然没有完成赋值。
2. 你绑定的ajax:beforeSend->location#add事件是在表单提交前立即触发，触发时机早于动态加载的map元素挂载时机，就会出现访问undefined的问题。

排查和解决步骤 #

第一步：先确认target回调是否正常触发 #

在mapTargetConnected中加日志验证回调是否执行：

mapTargetConnected(element) {
  console.log('map target 已挂载') // 先看控制台是否有这行输出
  this.name = "aaa"
}

如果没有这行输出，先检查：

• 页面中是否存在data-location-target="map"属性的元素，注意控制器名、target名拼写不要出错，大小写、单复数要对应
• 该元素是否是在表单提交之后才动态渲染到页面上的

方案1：调整元素加载顺序 #

如果map元素是静态内容，把map元素放在表单代码之前渲染，保证mapTargetConnected在表单绑定事件之前就执行完成。

方案2：给add方法加兜底逻辑 #

如果map确实是动态加载的元素，给访问逻辑加状态判断，避免访问未定义属性：

add(event) {
  // 可选链+默认值兜底
  console.log(this.name ?? '默认值')
  // 如果必须等map加载完成才能提交，就阻止提交逻辑
  if (!this.name) {
    event.preventDefault()
    alert('地图资源尚未加载完成，请稍后重试')
    return
  }
  // 后续业务逻辑
}

方案3：使用Stimulus值API替代直接挂载实例属性 #

用Stimulus内置的值API管理状态，比直接挂实例属性更稳妥，未赋值时也会有默认值不会返回undefined：

export default class extends Controller {
  static targets = [ "visible", "map" ]
  static values = { name: String } // 预定义name值

  mapTargetConnected(element) {
    this.nameValue = "aaa" // 给值属性赋值
  }

  add(event) {
    console.log(this.nameValue) // 未赋值时默认返回空字符串
  }
}

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