我有点犹豫要问这些问题,因为我不知道要分享哪些细节来帮助我找到答案。这是问题所在:
应用程序运行正常。所有数据都处于状态,因为我可以在控制台中将其打印出来并在React应用程序中使用它。但是,如下图所示,反应开发工具中显示的状态为“空对象”。对于Chrome& Firefox扩展以及react dev工具的独立版本。对于组件树的每个级别都是如此。
该应用程序是使用create-react-app与通过客户端代理的自定义快速服务器进行的React。在开发中运行。数据来自MongoDB。
我有调试的想法 1)尝试不同版本的相关npm包 2)创建应用程序的精简版/简化版以查看问题是否存在,如果没有,请重新构建以查看它的引入位置。
我显然不想做#2所以希望有人可以提出问题所在。
答案 0 :(得分:0)
每个React组件都有自己的内部状态,您可以通过this.state.yourPropertyName
访问并通过this.setState({yourPropertyName: 'someValue'})
进行设置。这个州是React的一部分。如果您想在React组件的状态中传递数据,则必须将其作为props
传递给其子组件。
Redux是一个独立于React的独立库。 Redux通过使用可由任何反应组件使用connect(mapStateToProps)(MyComponent)
访问的全局状态来帮助您管理应用程序的状态。当您connect()
组件时,它会创建一个包装器React组件(就像您选择的组件<Connect(Page)>
组件一样,它负责连接到Redux存储并作为道具传递给您的<Page>
组件这就是您从组件中访问Redux状态的原因this.props.myProperty
。
您正在查看的Chrome扩展程序是React-devtools。 state
部分指的是React的内部状态。如果您选择<Page>
组件,您可能会在props
部分下看到Redux商店中的数据。
如果要查看Redux状态,可以使用https://github.com/zalmoxisus/redux-devtools-extension或从React-devtools中选择<Provider>
组件并在控制台中键入$r.store.getState()
。