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)
}