如何用Preact Signal构建下拉列表？解决数据填充及报错问题

核心问题 #

1. Signal声明位置错误：你在组件外部声明了technicianObjList信号，这种方式无法触发React组件的重新渲染，导致数据更新后下拉框无法感知变化；同时这也是引发__H报错的原因——Preact Signals需要在组件上下文内使用才能正确绑定渲染更新。
2. 组件选择不当：你使用了react-select/async异步组件，但实际是通过useEffect初始化加载所有选项，普通react-select组件更适配这种场景。
3. 条件判断逻辑错误：technicianObjList是Signal对象，永远不会等于null，直接访问technicianObjList.value.length会在初始值为null时报错。

修正后的代码 #

import './App.css';
// 替换为普通Select组件
import Select from 'react-select';
// 使用useSignal钩子在组件内部声明信号
import { useSignal } from "@preact/signals-react";
import { useEffect } from "react";
import fetchAPI from "./utility/fetchAPI.js";

export default function App() {  
  // 初始值设为空数组，避免null导致的异常
  const technicianObjList = useSignal([]);  

  const toSelectOption = ({ id, name, jobtitle }) => ({ 
    label: `${name} ${jobtitle || ''}`.trim(), 
    value: { id, jobtitle, name }
  });
  
  useEffect(() => {
    const getData = async () => {
      const searchResult = await fetchAPI(/* 你的API参数 */);
      technicianObjList.value = searchResult.map(toSelectOption);
    };
    getData();
  }, []); 

  return (
    <div className="App">
       <Select
          isClearable
          // 直接传递signal.value，当信号更新时组件会自动重渲染
          options={technicianObjList.value}
       />
       {/* 安全获取选项数量，处理空数组情况 */}
       {technicianObjList.value.length || 0}
    </div>
  );
}

关键说明 #

• useSignal的使用：在组件内部通过useSignal声明信号，能让组件自动订阅信号变化，数据更新时触发重新渲染，解决下拉框不更新的问题。
• 组件替换：react-select/async适用于随用户输入动态请求选项的场景，初始化加载所有选项用普通Select即可。
• 初始值优化：将信号初始值设为空数组，避免null状态下的属性访问异常，同时让下拉框初始状态更合理。

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