Auto-memoization splits local client-state button text from its setter

未关闭
  • 哪里不对？
#7,309 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
45/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
python, react
领域
frontend, full-stack

调研方向

The issue is in the auto-memoization logic for local client state. Start by examining how rx._x.client_state generates React hooks and how child components are memoized. Look at the generated JavaScript to see the separate useState calls. The fix likely involves keeping the state reader and setter in the same React component scope. Test by running the provided reproduction script and checking the DOM updates.

由索引模型根据 Issue 内容生成。

描述

maybe-stale

Automatic memoization separates a local client state's reader and setter into different React state instances. A button that renders its own client-state value does not visibly update when clicked.

Reproduced on main commit 31d57490470228c08595e73bcae1f86703880e26 and on 565dd92bfbb26c86d064e7bebfaf47321414c7a0.

import reflex as rx

count = rx._x.client_state("local_count", default=0, global_ref=False)


def index():
    return rx.el.button(
        count.value,
        on_click=count.set_value(count.value + 1),
        id="counter",
    )


app = rx.App()
app.add_page(index)

Run the app, wait for hydration, and click the button. It keeps displaying 0; no browser error is reported. The expected text is 1, then 2 on the next click.

The generated Button memo has useState(0) and calls its own setter. Its text is rendered by a separate Bare memo with another useState(0). The setter therefore never updates the state that the text reads.

For comparison, rendering the value as an element prop keeps it in the same memo as the event handler and works:

rx.el.input(
    type="button",
    value=count.value,
    on_click=count.set_value(count.value + 1),
)

Validated both cases through real clicks and DOM assertions in Chrome. Please keep a local client-state read and its setter in the same hook scope when memoizing children.

主要语言
Python
星标
29k
派生
1.8k
平均合并
2 天 22 小时
30 天内合并 PR
143

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

reflex-dev/reflex 的其他 Issue

查看 reflex-dev/reflex 的全部 Issue

相似的 Issue

更多 Python Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。