Symfony 7中Stimulus控制器initialize()无法识别Target问题

问题原因 #

Stimulus的生命周期执行顺序直接导致了这个现象：

• initialize()：控制器实例刚创建时就执行，此时控制器还未挂载到DOM元素上，targets还没完成初始化绑定，自然找不到对应的DOM元素。
• connect()：控制器挂载到DOM元素后执行，此时Stimulus已经完成了targets的识别与绑定，所以能正常获取目标元素。

另外你的HTML代码存在冗余问题：嵌套了两个data-controller="autocomplete"的元素，外层的<div data-controller="autocomplete">没有对应的data-autocomplete-target元素，这会导致外层控制器实例在尝试获取target时抛出额外错误，建议移除外层不必要的控制器声明。

解决方案 #

1. 将操作target的逻辑移至connect()：
   所有需要访问targets的代码都应该放在connect()生命周期函数中，示例调整如下：

   export default class Autocomplete extends Controller
   {
       static targets = ["input", "hidden", "results"]
       static classes = ["selected"]
       static values = {
           ready: Boolean,
           submitOnEnter: Boolean,
           url: String,
           minLength: Number,
           delay: { type: Number, default: 300 },
           queryParam: { type: String, default: "q" },
       }
       static uniqOptionId = 0
   
       initialize() {
           // 仅放置不需要依赖target的初始化逻辑，比如变量初始化、非DOM相关配置
           this.searchTimeout = null;
       }
   
       connect() {
           // 所有操作target的逻辑放在这里
           console.log(this.targets.find("input")) // 正常获取
           console.log(this.targets.find("results")) // 正常获取
           // 比如绑定输入事件等DOM操作
           this.inputTarget.addEventListener('input', this.handleInput.bind(this));
       }
   
       // 新增示例输入处理函数
       handleInput() {
           // ... 你的业务逻辑
       }
   }
   

2. 清理冗余控制器声明：
   修改HTML，移除外层无对应target的控制器：

   <div class="ms-auto">
       <div data-controller="autocomplete" data-autocomplete-url-value="{{ path('app_fo_search') }}" role="combobox">
           <div class="input-group input-group-sm">
               <input type="text" id="search_input" class="form-control form-control-sm collapse collapse-horizontal" placeholder="Rechercher un artiste, une oeuvre ou une collection...." data-autocomplete-target="input"/>
               <span class="input-group-text" data-bs-toggle="collapse" data-bs-target="#search_input"><i class="bi bi-search"></i></span>
           </div>
   
           <input type="hidden" name="search" id="search_value" data-autocomplete-target="hidden"/>
   
           <ul class="list-group" data-autocomplete-target="results" style="min-width: calc(25% - 8px);max-width:calc(33% - 8px);max-height: 90vh; overflow-y: scroll;position: absolute;right:1rem;z-index: 10000;"></ul>
       </div>
   </div>
   

控制台错误说明 #

你提供的截图中的错误大致为：「无法读取未定义的属性'find'」，本质是initialize()中this.targets还未被Stimulus初始化，调用this.targets.find()时触发了未定义错误。

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