SolidJS 跨组件组装组件 Bugtitle

2024-10-23

没头绪。前端！

在用 Solidjs 配合 Vercel 云端部署的时候遇到这么个问题：

// ...

const shuffle = (a: any[]) =>
	a.map((value) => ({ value, sort: Math.random() }))
		.sort((a, b) => a.sort - b.sort)
		.map(({ value }) => value)

interface Face {
  icon: JSElement;
  title: string;
}
const mul = createSignal<Face[]>([
  {
    icon: <div class="i-ci:some"/>,
    title: "foo"
  },
  {
    icon: <div class="i-ci:other"/>,
    title: "bar"
  }
])

return (<For each={shuffle(mul())}>
          {(i) => <div>
/* 在真实情况中Dynamic组件在其它组件中，并在此传入 `mul` 调用该组件 */
                    <Dynamic component={()=>i.icon}/>
                    {i.title}
                  </div>}
        </For>
)

好了，在本地 dev 模式，多刷新几次，预期的渲染是：

foo

bar

实际上在本地也确实一直是正常显示，他们的顺序也如预期随机变换(因为 shuffle )

但是部署到 vercel 之后，刷新它可能就变成这样：

bar

foo

mul 是按预期的对象数组形式保持不变的，每次 shuffle 都应该保留每个 title 和对应的 icon 之间的对应关系, 但是在云端的渲染表现则不是这样，对象之内的对应关系也被打乱。虽然我有理由怀疑是缓存什么的问题，查看 devtool 的 Element 后无果。可能是因为神奇编译期优化？

Home

未解决