SolidJS中createSignal更新后UI未同步显示问题求助

问题根源 #

你遇到的问题核心是SolidJS的createSignal依赖引用变化触发视图更新。你直接修改了数组内对象的selected属性，然后把同一个数组引用传给setOptions，信号做浅比较时发现引用未改变，因此不会触发视图更新。

解决方案 #

有两种常用修复方式，根据场景选择即可：

方式1：创建新的数组和对象引用

每次更新时，通过展开运算符生成新数组，同时对目标对象也创建新引用，确保信号能检测到变化：

import { render } from "solid-js/web";
import { createSignal, Show, Index } from "solid-js";

const options = [
        {
            title: "ReactJs",
            subtitle: "A front-end framework for building views on the web",
            selected: false
        },
        {
            title: "SolidJS",
            subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
            selected: false
        },
        {
            title: "MumboJumboJS",
            subtitle: "null",
            selected: false
        }
    ]


export default function CheckboxArea(props) {
    const [options, setOptions] = createSignal(props.options);

    function onClickListener(index: number) {
        // 创建数组浅拷贝
        const op = [...options()];
        // 创建目标对象浅拷贝并修改selected属性
        op[index] = { ...op[index], selected: true };
        setOptions(op);
    }

    return(
        <div>
            <Index each={options()}>{(each_option, index) =>
                <div onClick={() => onClickListener(index())}>
                    {/* 直接使用each_option()的属性，更符合响应式逻辑 */}
                    <Show when={each_option().selected}>
                        <div>{each_option().title}</div>
                    </Show>
                    <Show when={!each_option().selected}>
                        <div>{each_option().subtitle}</div>
                    </Show>
                </div>
            }
            </Index>
        </div>
    )
}

render(() => <CheckboxArea options={options}/>, document.getElementById("app")!);

方式2：使用createMutable（适合频繁修改嵌套状态）

如果需要频繁修改嵌套对象属性，createMutable更便捷，它支持直接修改状态而无需创建新引用：

import { render } from "solid-js/web";
import { createMutable, Show, Index } from "solid-js";

const options = [
        {
            title: "ReactJs",
            subtitle: "A front-end framework for building views on the web",
            selected: false
        },
        {
            title: "SolidJS",
            subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
            selected: false
        },
        {
            title: "MumboJumboJS",
            subtitle: "null",
            selected: false
        }
    ]


export default function CheckboxArea(props) {
    const options = createMutable([...props.options]);

    function onClickListener(index: number) {
        // 直接修改属性，自动触发视图更新
        options[index].selected = true;
    }

    return(
        <div>
            <Index each={options}>{(each_option, index) =>
                <div onClick={() => onClickListener(index())}>
                    <Show when={each_option.selected}>
                        <div>{each_option.title}</div>
                    </Show>
                    <Show when={!each_option.selected}>
                        <div>{each_option.subtitle}</div>
                    </Show>
                </div>
            }
            </Index>
        </div>
    )
}

render(() => <CheckboxArea options={options}/>, document.getElementById("app")!);

额外优化提示 #

• Index组件的index是响应式信号，调用时要使用index()获取当前值；
• 直接访问each_option（或each_option()）的属性，比通过options()[index]访问更高效，也更贴合Solid的响应式追踪机制。

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