SolidJS中SUID Select组件动态选项无法触发问题求助

我在使用SolidJS结合SUID（Solid Material UI）库实现Select组件时，遇到了动态选项无法正常触发的问题：

• 静态选项能正常工作，但通过createResource获取的动态选项（如接口拉取的posts数据）无法选中
• 具体表现：
  1. 选中动态选项后，Select的显示值不更新
  2. onChange事件始终接收相同的参数值
  3. 多次切换选项后，控制台出现MUI: A component is changing the uncontrolled value state...错误

我已尝试以下方案但未解决问题：

• 为Select设置defaultValue
• 为createSignal设置初始值
• 为动态生成的MenuItem设置tabIndex

相关代码示例 #

import { For, createResource, createSignal } from 'solid-js';
import { Select, MenuItem } from '@suid/material'; // or "solid-ui", based on the library's exports

function Post() {
  const [postsResource, { mutate, refetch }] = createResource(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });

  // State for the selected option
  const [selectedOption, setSelectedOption] = createSignal('any');

  return (
    <div>
      <h1>Posts</h1>
      {postsResource.loading && <p>Loading...</p>}
      {postsResource.error && <p>Error: {postsResource.error.message}</p>}
      {
        <>
          <Select
            // defaultValue={'any'}
            // value={selectedOption()}
            onChange={(e) => {
              console.log('onChange', e.currentTarget);
              setSelectedOption(e.currentTarget.value);
            }}
          >
            <MenuItem value="any">Choose any...</MenuItem>
            <MenuItem value="option1">option1</MenuItem>
            <MenuItem value="option2">option2</MenuItem>
            <For each={postsResource()}>
              {(post) => <MenuItem value={post.id}>{post.title}</MenuItem>}
            </For>
          </Select>
        </>
      }
    </div>
  );
}

export default Post;

期望效果 #

能够正常选中Select组件中的任意选项（包括动态加载的选项）

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