下面是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()
更新,但视图不更新。
1条答案
按热度按时间gupuwyp21#
您正在尝试改变现有值并将其设置为新值。然而,信号在内部运行相等性检查,因为你传递的是相同的值,因为数组是对象,对象是通过引用比较的,信号的值永远不会更新。
有几种解决方案,最基本的一种是用更新的值创建一个新数组,并将其设置为新值:
或者,您可以在信号上设置等于为false,以便即使值相同也强制更新。