createEfect日志反应性更新信号,尽管未使用反应性属性更新DOM

发布于 2025-01-26 18:14:22 字数 2032 浏览 1 评论 0原文

我认为这次我在这里重现了我的问题。我正在使用上一个问题的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文