createEfect日志反应性更新信号,尽管未使用反应性属性更新DOM
我认为这次我在这里重现了我的问题。我正在使用上一个问题的 create_delayed 函数,现在createeefect
in iPET>抬高
函数将更新的值记录为101。 DOM结果。
import { render } from "solid-js/web";
import { For, createSignal, createMemo, mapArray, createEffect } from "solid-js";
function Counter() {
const _pov = createSignal({});
const m_showdown = createMemo(() => read(_pov).showdown)
const m_showdown_hands = createMemo(() => m_showdown()?.hands)
let m_showdown_hand2 = create_delayed(m_showdown_hands, () => m_showdown() ? 1000 : undefined)
let m_show_hand2 = () => m_showdown_hand2()?.map((_) => make_card(_))
createEffect(() => {
let res = m_show_hand2()
if (res && res[0]) {
res[0].elevate()
}
})
setTimeout(() => {
owrite(_pov, {
showdown: {
hands: [1,2,3]
}
})
}, 1000)
return (
<For each={m_show_hand2()}>{hand =>
<span>{hand.y}</span>
}</For>
);
}
render(() => <Counter />, document.getElementById("app"));
function make_card(y) {
let counter = createSignal(y)
// this effect runs
createEffect(() => {
console.log(read(counter))
})
return {
y() { return read(counter) },
elevate() { owrite(counter, _ => _ + 100) }
}
}
function owrite(signal, fn) {
if (typeof fn === 'function') {
return signal[1](fn)
} else {
signal[1](_ => fn)
}
}
function read(signal) {
if (Array.isArray(signal)) {
return signal[0]()
} else {
return signal()
}
}
function create_delayed<T>(accessor: () => T | undefined, delay: () => number) {
const _delayed = createSignal(accessor())
let i_timeout
createEffect(() => {
accessor()
let res = delay()
clearTimeout(i_timeout)
if (res !== undefined) {
i_timeout = setTimeout(() => {
owrite(_delayed, accessor())
}, res)
} else {
owrite(_delayed, undefined)
}
})
return () => read(_delayed)
}
I think this time I've reproduced my issue here. I am using this create_delayed
function from previous question, now the createEffect
in elevate
function logs the updated value as 101. But it's not updated on the dom result.
import { render } from "solid-js/web";
import { For, createSignal, createMemo, mapArray, createEffect } from "solid-js";
function Counter() {
const _pov = createSignal({});
const m_showdown = createMemo(() => read(_pov).showdown)
const m_showdown_hands = createMemo(() => m_showdown()?.hands)
let m_showdown_hand2 = create_delayed(m_showdown_hands, () => m_showdown() ? 1000 : undefined)
let m_show_hand2 = () => m_showdown_hand2()?.map((_) => make_card(_))
createEffect(() => {
let res = m_show_hand2()
if (res && res[0]) {
res[0].elevate()
}
})
setTimeout(() => {
owrite(_pov, {
showdown: {
hands: [1,2,3]
}
})
}, 1000)
return (
<For each={m_show_hand2()}>{hand =>
<span>{hand.y}</span>
}</For>
);
}
render(() => <Counter />, document.getElementById("app"));
function make_card(y) {
let counter = createSignal(y)
// this effect runs
createEffect(() => {
console.log(read(counter))
})
return {
y() { return read(counter) },
elevate() { owrite(counter, _ => _ + 100) }
}
}
function owrite(signal, fn) {
if (typeof fn === 'function') {
return signal[1](fn)
} else {
signal[1](_ => fn)
}
}
function read(signal) {
if (Array.isArray(signal)) {
return signal[0]()
} else {
return signal()
}
}
function create_delayed<T>(accessor: () => T | undefined, delay: () => number) {
const _delayed = createSignal(accessor())
let i_timeout
createEffect(() => {
accessor()
let res = delay()
clearTimeout(i_timeout)
if (res !== undefined) {
i_timeout = setTimeout(() => {
owrite(_delayed, accessor())
}, res)
} else {
owrite(_delayed, undefined)
}
})
return () => read(_delayed)
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论