无构建版Solid-js嵌套元素无响应，自动完成组件列表无法渲染

核心问题分析 #

你的代码中fetch能正常获取数据，但UL元素无法渲染的关键原因是条件渲染的模板未被返回，Solid无法识别这部分动态内容。次要问题是createEffect中未做防抖，会导致输入时频繁发起请求，但不影响渲染结果。

具体修复点 #

1. 条件渲染必须返回模板：在return的动态函数中，满足条件时要return生成的html模板，否则Solid无法捕获这部分内容。
2. 可选：添加防抖优化请求：避免输入过程中频繁触发fetch请求，提升性能。

修复后的完整代码 #

import { render } from 'https://cdn.skypack.dev/solid-js/web';
import { createSignal, createEffect, onCleanup } from 'https://cdn.skypack.dev/solid-js';
import html from "https://esm.sh/solid-js@1.8.1/html";

function Autocomplete({ apiEndpoint }) {
    const [query, setQuery] = createSignal("");
    const [suggestions, setSuggestions] = createSignal([]);
    const [showDropdown, setShowDropdown] = createSignal(false);
    let debounceTimer;

    createEffect(() => {
        const search = query().toLowerCase();
        if (search) {
            // 防抖处理：300ms内连续输入不触发请求
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                console.log("Fetching suggestions for query:", search);
                fetch(`${apiEndpoint}?name=${search}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log("Received data:", data);
                        setSuggestions(data.suggestions || []);
                        setShowDropdown(!!(data.suggestions && data.suggestions.length > 0));
                    })
                    .catch(error => console.error('Error fetching suggestions:', error));
            }, 300);
        } else {
            setSuggestions([]);
            setShowDropdown(false);
        }

        // 清理防抖定时器
        onCleanup(() => clearTimeout(debounceTimer));
    });

    const handleInput = (e) => {
        setQuery(e.target.value);
    };

    const handleSelect = (item) => {
        setQuery(item);
        setShowDropdown(false);
    };

    return html`
        <div class="autocomplete position-relative">
          <input
            type="text"
            class="form-control"
            placeholder="Search..."
            value=${query()}
            onInput=${handleInput}
          />
          ${() => {
            if (showDropdown() && suggestions().length > 0) {
                // 关键：return模板，让Solid能渲染
                return html`
                <ul class="dropdown-menu show" style="width: 100%;">
                  ${suggestions().map((item, i) => html`
                    <li key=${i} class="dropdown-item" onMouseDown=${() => handleSelect(item)}>
                      ${item}
                    </li>
                  `)}
                </ul>
              `;
            } else {
                console.log('no data');
                // 不满足条件时返回null或空，避免渲染多余内容
                return null;
            }
        }}
        </div>
      `;
}

function App() {
    return html`
        <div class="container mt-4">
          <h1>Bootstrap 5 Autocomplete with Solid.js</h1>
          <${Autocomplete} apiEndpoint="/api/properties/" />
        </div>
      `;
}

render(App, document.getElementById('body'));

关键修改说明 #

• 在条件渲染的函数中，满足显示下拉框的条件时，return生成的html模板，确保Solid能捕获并渲染这部分动态内容；
• 添加了300ms的防抖逻辑，避免输入过程中频繁发起HTTP请求，优化性能；
• 使用!!将data.suggestions && data.suggestions.length > 0转换为布尔值，确保setShowDropdown接收的是正确的布尔类型。

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