Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript MobX可观测布尔值不会重新呈现组件,但可观测数字会_Javascript_Reactjs_Typescript_Mobx - Fatal编程技术网

Javascript MobX可观测布尔值不会重新呈现组件,但可观测数字会

Javascript MobX可观测布尔值不会重新呈现组件,但可观测数字会,javascript,reactjs,typescript,mobx,Javascript,Reactjs,Typescript,Mobx,我正在使用TypeScript、hook和mobx-react-lite创建一个新的create-react-app应用程序。尽管过去在React原生应用程序中广泛使用过MobX,但我遇到了一个对我来说毫无意义的问题 我有一个有两个可观测值的存储:一个数字和一个布尔值。有一个initialize()方法运行一些库代码,在成功回调中,它将数字和布尔值设置为不同的值(请参见下面的A行和B行) 问题:我的组件只有在存在行A时才重新呈现自身。在这种情况下,初始化完成后,将显示“就绪”文本,并显示按钮。如

我正在使用TypeScript、hook和
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>
  )
}