0

在第一次渲染之前，我有要向其传递数据的组件。但我总是先得到一个空数组，然后在初始渲染后得到数据。我正在使用 Redux 操作和 Reducers 通过 mapStateToProps 传递数据。

[这里解决了]：

如何在 React-Redux 中设置接收到的同步数组的所有属性？

4

2 回答 2

1

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

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

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

于 2018-04-17T08:05:09.703 回答
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
}
于 2018-04-17T13:21:30.120 回答