Javascript MobX可观测布尔值不会重新呈现组件,但可观测数字会
我正在使用TypeScript、hook和Javascript MobX可观测布尔值不会重新呈现组件,但可观测数字会,javascript,reactjs,typescript,mobx,Javascript,Reactjs,Typescript,Mobx,我正在使用TypeScript、hook和mobx-react-lite创建一个新的create-react-app应用程序。尽管过去在React原生应用程序中广泛使用过MobX,但我遇到了一个对我来说毫无意义的问题 我有一个有两个可观测值的存储:一个数字和一个布尔值。有一个initialize()方法运行一些库代码,在成功回调中,它将数字和布尔值设置为不同的值(请参见下面的A行和B行) 问题:我的组件只有在存在行A时才重新呈现自身。在这种情况下,初始化完成后,将显示“就绪”文本,并显示按钮。如
mobx-react-lite创建一个新的create-react-app
应用程序。尽管过去在React原生应用程序中广泛使用过MobX,但我遇到了一个对我来说毫无意义的问题
我有一个有两个可观测值的存储:一个数字和一个布尔值。有一个initialize()
方法运行一些库代码,在成功回调中,它将数字和布尔值设置为不同的值(请参见下面的A行和B行)
问题:我的组件只有在存在行A时才重新呈现自身。在这种情况下,初始化完成后,将显示“就绪”文本,并显示按钮。如果删除第B行,“就绪”文本仍会出现。但是如果我删除A行(并保留B行),按钮将永远不会渲染。我已经检查了上百次了,所有东西都正确导入了,我已经打开了decorator支持。我无法想象为什么观察一个数字可以触发重新渲染,但观察一个布尔值却不能。恐怕我错过了一些非常明显的东西。有什么想法吗
相关的简化代码如下:
//store/app.store.ts
导出类应用商店{
@可观察就绪=错误
@可观测x=5
初始化(){
//接受回拨
第三方服务初始化(()=>{
this.ready=true
这个。x=10
})
}
}
//context/stores.ts
const appStore=新appStore()
const storesContext=React.createContext({
应用商店
})
export const useStores=()=>React.useContext(storesContext)
更新appStore.ready
时,组件会重新呈现,但DOM不会更新。控制台显示'render'true
并显示按钮的表示形式,但检查文档本身时没有显示按钮。然而,不知何故,将条件从appStore.ready
更改为appStore.x==10
确实会更新DOM。结果表明,我在问题中没有给出完整的信息。在创建最小复制时,我决定尝试从index.tsx
中删除顶级
组件。突然间,一切都起了作用。碰巧,mobx会做出反应-lite@1.5.2
,在我的项目创建时最新的稳定版本,在严格模式下不起作用。在添加到稳定版本之前,有两个选项:
- 从React组件树中删除严格模式
- 使用
mobx反应-lite@next
代码看起来非常正常。您能否创建一个最小的复制(例如作为github上的独立项目)?实际上。。。我没有在初始化()
上看到@action
装饰器-它只是从示例代码中省略了,还是在实际应用程序中确实缺少了它?@amakhrov它在应用程序中缺少了,但我试着用@action
,@action.bound
装饰初始化()
,我已经尝试在runInAction()
中运行ready
和x
的更新,但不幸的是没有任何改变。我会很快得到一个复制品并链接到这里,谢谢。同时,我还更新了我的问题,提供了更多信息。
// App.tsx
const App = observer(() => {
const { appStore } = useStores()
useEffect(() => {
appStore.initialize()
}, [appStore])
return (
<div>
{ appStore.x === 10 && 'ready' } // <-- Line A
{ appStore.ready && <button>Go</button> } // <-- Line B
</div>
)
}