SolidJS中传递Signal给组件，createEffect更新不触发重渲染问题

问题分析 #

你的Select组件无法响应subtasks Signal的更新，核心原因是SolidJS组件的props是响应式对象，直接解构会丢失响应性：

• 你在Select组件中直接解构了options参数，此时options只会拿到组件初始化时的初始值，无法追踪父组件传递的后续更新。
• 父组件虽然通过subtasks()传递了响应式值，但子组件没有建立正确的依赖追踪，导致props更新时组件不会重新渲染。

解决方案 #

修改Select组件，保留props的响应式访问，不要直接解构options，通过props.xxx的方式访问属性，让Solid能够追踪变化：

修改后的Select组件代码 #

interface SelectProps {
  onChange?: (value: string) => void;
  size: SelectSize;
  options: string[];
  placeHolder?: string;
}

export enum SelectSize {
  Small = "w-[100px]",
  Medium = "w-[200px]",
  Large = "w-[300px]",
  XLarge = "w-[400px]",
}

export default function Select(props: SelectProps) {
  const renderOptions = () => {
    return props.options.map((t) => <option value={t}>{t}</option>);
  };
  return (
    <select
      class={`bg-gray-50 border border-gray-300 text-gray-900 
      text-sm rounded-lg ${props.size} focus:ring-blue-500 focus:border-blue-500
       block  p-2.5  
       `}
      name="subtask"
      id="subtasks"
      onChange={(event) => {
        props.onChange?.(event.target.value);
      }}
    >
      {props.placeHolder ? (
        <option value={undefined} selected={true}>
          {props.placeHolder}
        </option>
      ) : undefined}
      {renderOptions()}
    </select>
  );
}

父组件额外优化 #

你的父组件中createEffect未指定依赖，会导致每次组件渲染都触发请求。建议添加依赖项，仅当work()变化时才重新请求：

createEffect(() => {
  async function fetchSubTasks() {
    const workHolder = work();
    if (!workHolder) return; // 避免work为空时调用接口
    setSubTasks(await getSubTasks(workHolder.work_type))
  }
  
  fetchSubTasks();
}, [work]); // 添加依赖，仅当work变化时执行

原理说明 #

在SolidJS中，组件的props是响应式代理对象，只有在渲染函数或响应式上下文（如createEffect、createMemo）中通过props.xxx访问属性时，才会建立依赖追踪。直接解构props会将属性提取为静态值，丢失响应性，因此必须保留props.xxx的访问方式，让Solid能够感知属性变化并触发组件重新渲染。

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