Javascript：导出/导入常量未定义

Question

我有一个文件，包含mocks和从该文件到我的视图的导出常量（它们是反应组件）。但这些常数是未定义的。例如，在我的ListMock.js中，我有以下内容：

export const MOCKED_EXPANDED_LIST = {
    list1: {
        id: 1,
        filtersTags: [
            {
                filterTagName: "filter1",
                filteredItemsCount: 9
            },
            {
                filterTagName: "filter2",
                filteredItemsCount: 5
            }
        ]

    } 

    ...
};

并在此输入此常量：

...
import {MOCKED_EXPANDED_LIST} from '../../../mocks/ListMock';

export class ListItem extends React.Component {
    render() {
        ...
        const {listItemIndex} = this.props;

        return (
            <li className={`panel ${styles.listItem} ${styles.listPanel}`}>
                ...
                <ExpandedListItem listItemIndex={listItemIndex}
                     expandedListItem={MOCKED_EXPANDED_LIST[`list${listItemIndex}`]} />
            </li>);

    }
}

由于MOCKED_EXPANDED_LIST为undefined，因此出现错误。但是，如果我将绑定更改为：

 return (
            <li className={`panel ${styles.listItem} ${styles.listPanel}`}>
                ...
                <ExpandedListItem listItemIndex={listItemIndex}
                      expandedListItem={MOCKED_EXPANDED_LIST} />
            </li>);

    }

在我的ExpandedListItem组件expandedListItem道具中定义了MOCKED_EXPANDED_LIST常量。

这种行为的原因是什么？