无法使用Redux在ExtReact中的第一次渲染之前从存储加载数据;

时间:2018-04-17 07:01:21

标签: javascript reactjs redux react-redux extreact

在第一次渲染之前,我有要传递数据的组件。但我总是首先获得一个空数组,然后将数据转换为初始渲染。我正在使用Redux操作和Reducers通过mapStateToProps传递数据。

[这是在这里解决]:

How to wait until all of the properties of received synchronous array are set in React-Redux?

2 个答案:

答案 0 :(得分:1)

在我看来,我认为当你的DOM首次加载时,而不是显示项目,它首先设置状态,

this.setState({ usershortcuts: this.props.usershortcuts });

然后在第二次加载,因为项目处于开启状态,即加载时。如果您可以调用在ComponentDidMount中获取项目的方法而不是设置状态,那么您的应用程序将正常工作。

答案 1 :(得分:1)

你的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
}