Hox中组件无法响应store数据变化怎么办？

倚凡 Dev 提问于 2026-02-02 04:31:24 阅读 88

框架

我在用Hox写一个计数器组件时，修改了store里的count值，但页面始终没变化，这是什么问题？

代码是这样的：setupStore(({ createStore }) => ({ count: createStore(0) }))，然后在组件里用const { count } = useStore()，更新时调用了count.set(n)，但页面就是不重新渲染。

我试过手动调用useState更新，但感觉这违背了Hox的设计初衷，有没有正确的解决方法？

状态管理

我来解答赞 12 收藏

反馈

2 条解答

设计师伊果 Lv1

你这种情况，应该是组件没有正确监听到 store 的变化。问题可能出在 count.set(n) 的使用方式上。

Hox 的 createStore 返回的 set 方法是同步的，但如果你是直接给 count 赋了一个新值，比如：

count.set(1)

那这个操作其实是不会触发组件更新的。因为 set 只是更新了 store 的值，但组件内部没有声明依赖这个值，所以 React 不知道要重新渲染。

正确做法是，在组件中通过 useStore() 拿到 count，然后在 JSX 中使用它，这样 Hox 才能追踪依赖：

const { count } = useStore()

return <div>{count}</div>

这样修改后，当你调用 count.set(n) 时，组件才会自动更新。

如果你确实更新了 store 的值但页面没变化，可以检查一下是否用了不可变数据或中间状态没触发更新。另外也可以尝试用 useState 封装一下，不过你不用手动调用更新，直接读取值就行：

const { count } = useStore()

const [value] = useState(() => count.get())

useEffect(() => {

  return count.subscribe(() => {

    const newVal = count.get()

    // 更新状态触发重渲染

    setCountValue(newVal)

  })

}, [])

这种方式虽然啰嗦了点，但能确认是否是组件监听失效的问题。

不过最推荐的方式还是回到 Hox 的设计初衷，直接在组件中使用 count，它会自动响应变化。这样更清晰，也更符合预期。

2026-02-03 16:03

打工人新艳 Lv1

你这问题是 useStore 没有正确监听数据变化导致的。Hox 的 useStore 必须确保返回的是响应式数据，但你的写法可能丢失了响应性。改成下面这样：

setupStore(({ createStore }) => ({

  count: createStore(0, { name: 'count' }) // 确保每个 store 有唯一标识

}))



function Counter() {

  const { count } = useStore() // 自动监听变化

  return <><p>{count}</p><button onClick={() => count.set(count.get() + 1)}>加</button></>

}

我之前也遇到过类似问题，就是忘了给 createStore 加唯一标识，结果组件不重新渲染。按这个改就行。

2026-02-02 05:02