如何将SolidJS Resource转换为可过滤的JavaScript数组？

错误原因 #

你遇到的years.filter is not a function报错，本质是两个问题：

1. years是SolidJS的资源信号函数，不是数组本身——必须调用years()才能拿到服务器返回的实际数组。
2. 直接在For的each参数里写过滤逻辑，既没法响应searchString的变化，还会在资源未加载完成（返回undefined）时触发额外报错。

正确实现方式 #

用createMemo创建响应式的过滤结果，同时处理资源未加载的兜底情况：

function YearSearch(props) {
  const [years] = createResource(() => server.fetchData("json/list-of-years"));
  // 假设searchString是已定义的信号：const [searchString, setSearchString] = createSignal("");

  // 响应式过滤数组，依赖years和searchString的变化自动更新
  const filteredYears = createMemo(() => {
    // 兜底空数组，避免资源未加载时调用filter报错
    const currentYears = years() || [];
    return currentYears.filter(num => num.name.includes(searchString()));
  });

  return (
    <Show when={years()}>
      <For each={filteredYears()}>
        {(num) => 
          <p>{ num.name }</p>
        }
      </For>
    </Show>
  );
}

关键细节说明 #

• years() || []：资源在加载完成前会返回undefined，用空数组兜底可以避免Cannot read properties of undefined (reading 'filter')的错误。
• createMemo：只有当years()或searchString()发生变化时，才会重新执行过滤逻辑，既保证响应式，又提升性能，符合SolidJS的最佳实践。

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