无法使用 Redux 在 ExtReact 中第一次渲染之前从商店加载数据;
Unable to load data from the store before the first render in ExtReact using Redux;
在第一次渲染之前,我有要向其传递数据的组件。但我总是先得到一个空数组,然后在初始渲染后得到数据。我正在使用 Redux 动作和 Reducers 通过 mapStateToProps 传递数据。
[此处已解决]:
在我看来,我认为当您的 DOM 第一次加载时,它首先设置状态而不是显示项目,
this.setState({ usershortcuts: this.props.usershortcuts });
然后在第二次加载时,因为项目处于状态,即加载时。如果您可以在 ComponentDidMount 中调用获取项目的方法而不是设置状态,那么您的应用程序将正常运行。
您的 ShortcutComponent
是无国籍的。它需要渲染的数据作为道具完全来自外部。将整个菜单包裹到一个按钮中也很奇怪:
const ShortcutComponent = ({usershortcuts}) => (
<Menu title="Shortcuts">
{usershortcuts.map((item) => {
<MenuItem iconCls={item.shortcutDefinition.iconCls} text={item.shortcutDefinition.description} />
})}
</Menu>
);
const mapStateToProps = ({usershortcuts}) => ({
usershortcuts
});
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(usershortcutAction, dispatch)
});
export connect(mapStateToProps, mapDispatchToProps)(ShortcutComponent);
通过 Store
加载也是异步的。您必须在 加载完成后 发送加载成功。它必须看起来类似于:
export usershortcutFetchDataThroughStore = dispatch => {
userShortcutStore.on('load', (records, success) => {
if (success) return dispatch(usershortcutFetchDataThroughStoreSuccess(records));
return dispatch(usershortcutsFetchFailed()); // indicates an error when fetching
};
store.load();
dispatch(usershortcutsLoading()); // this action should set a variable that indicates loading so it can be rendered accordingly
}
在第一次渲染之前,我有要向其传递数据的组件。但我总是先得到一个空数组,然后在初始渲染后得到数据。我正在使用 Redux 动作和 Reducers 通过 mapStateToProps 传递数据。
[此处已解决]:
在我看来,我认为当您的 DOM 第一次加载时,它首先设置状态而不是显示项目,
this.setState({ usershortcuts: this.props.usershortcuts });
然后在第二次加载时,因为项目处于状态,即加载时。如果您可以在 ComponentDidMount 中调用获取项目的方法而不是设置状态,那么您的应用程序将正常运行。
您的 ShortcutComponent
是无国籍的。它需要渲染的数据作为道具完全来自外部。将整个菜单包裹到一个按钮中也很奇怪:
const ShortcutComponent = ({usershortcuts}) => (
<Menu title="Shortcuts">
{usershortcuts.map((item) => {
<MenuItem iconCls={item.shortcutDefinition.iconCls} text={item.shortcutDefinition.description} />
})}
</Menu>
);
const mapStateToProps = ({usershortcuts}) => ({
usershortcuts
});
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(usershortcutAction, dispatch)
});
export connect(mapStateToProps, mapDispatchToProps)(ShortcutComponent);
通过 Store
加载也是异步的。您必须在 加载完成后 发送加载成功。它必须看起来类似于:
export usershortcutFetchDataThroughStore = dispatch => {
userShortcutStore.on('load', (records, success) => {
if (success) return dispatch(usershortcutFetchDataThroughStoreSuccess(records));
return dispatch(usershortcutsFetchFailed()); // indicates an error when fetching
};
store.load();
dispatch(usershortcutsLoading()); // this action should set a variable that indicates loading so it can be rendered accordingly
}