typescript 为什么信号更新没有反映在UI中?

9wbgstp7  于 2023-06-24  发布在  TypeScript
关注(0)|答案(1)|浏览(104)

下面是SolidJS中的代码。
我正在使用createSignal,我想在options中的值发生变化时渲染某些视图。

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);
    console.log(options())

    function onClickListener(index: number) {
        console.log("Click")
        const op = options()
        op[index].selected = true
        setOptions(op)
    }
    return(
        <div>
            <Index each={options()}>{(each_option, index) =>
                <div onClick={() => onClickListener(index)}>
                    <Show when={options()[index].selected}>
                        <div>{each_option().title}</div>
                    </Show>
                    <Show when={!options()[index].selected}>
                        <div>{each_option().subtitle}</div>
                    </Show>
                </div>
            }
            </Index>
        </div>
    )
}

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

当然,单击事件注册和options()更新,但视图不更新。

gupuwyp2

gupuwyp21#

您正在尝试改变现有值并将其设置为新值。然而,信号在内部运行相等性检查,因为你传递的是相同的值,因为数组是对象,对象是通过引用比较的,信号的值永远不会更新。
有几种解决方案,最基本的一种是用更新的值创建一个新数组,并将其设置为新值:

function onClickListener(index: number) {
  setOptions([...updatedList]);
}

或者,您可以在信号上设置等于为false,以便即使值相同也强制更新。

createSignal(props.options, { equals: false });

相关问题