Javascript 从另一个模块导入PropType值会导致未定义

免责声明：我是新的反应和ES6，所以请耐心等待

在FacetGroups.js中，我定义了一些模式，用于使用PropTypes进行比较，PropTypes在应用程序的各个模块中使用。它在这个文件中工作得很好

import React from 'react'
import PropTypes from 'prop-types'
import FacetGroup from './FacetGroup';

/* ... */
const FacetGroups = ({ facets }) => (
    <div>
        {Object.keys(facets).map( facetName => {
            const facet = facets[facetName];

            return (
                <section key={facetName}>
                    <header>{facet.displayName}</header>
                    <FacetGroup group={facet} groupName={facetName} />
                </section>
            );
        })}
    </div>
);

const GROUP_PROP_TYPE = PropTypes.shape({
  displayName: PropTypes.string.isRequired,
  /* ... */
  isOpen: PropTypes.bool,
  isShowingAll: PropTypes.bool
});

FacetGroups.propTypes = {
    facets: PropTypes.objectOf( GROUP_PROP_TYPE ).isRequired /* This works fine */
}

/* ... */

export { GROUP_PROP_TYPE, /* ... */ };

---

有人能帮我理解为什么这会失败吗？这与评估的顺序有关吗？我在浏览器中无法像在普通JS中那样进行有效调试，因为它都是通过webpack和babel进行编译的…

在FacetGroup.JS中正确定义FacetGroup

import React from 'react'
import PropTypes from 'prop-types'

import { GROUP_PROP_TYPE, /* ... */ } from './FacetGroups';

/* ... */

const FacetGroups = {
  facets: PropTypes.objectOf(GROUP_PROP_TYPE).isRequired /* This works fine */
}

---

你应该避免循环依赖。

---

尝试在FacetGroups.js中的一个单独文件中定义

GROUP\u PROP\u TYPE

，FacetGroups是一个带有facet的React组件：

propTypes.objectOf（GROUP\u PROP\u TYPE）

structure。在FacetGroup.js中，FacetGroup（单数）是一个React组件，具有

组：group\u PROP\u TYPE.isRequired，groupName:PropTypes.string.isRequired

结构。我不确定你在“纠正”什么。。。我已经更新了我的答案，增加了一点上下文。当我定义FacetGroup时，我正在“更正”，因此当您导入它时，它将被定义，显然避免了错误，这是您问题中的主要问题。我没有（也不想）将变量

FacetGroups

导入FacetGroup。我需要文件FacetGroups.js中的

GROUP\u PROP\u TYPE

（当前未定义），以便在为本地定义的

FacetGroup

React组件声明PROP类型时使用它@Apolo的回答是正确的-循环依赖性是导致问题的原因。可能问题的根本原因是循环依赖性，这似乎是设置的。您应该尝试定义

GROUP\u PROP\u TYPE

elsewhere@Apolo-你完全正确（删除了我之前的评论，我错误地导出了东西）-这是循环依赖关系。请把这个写下来作为答案，我会把它标记为被接受的：）完成：）很乐意帮忙

module: {
    loaders: [
        { 
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react'],
                plugins: ['transform-object-rest-spread']
            }
        }
   ]
}

import React from 'react'
import PropTypes from 'prop-types'

import { GROUP_PROP_TYPE, /* ... */ } from './FacetGroups';

/* ... */

const FacetGroups = {
  facets: PropTypes.objectOf(GROUP_PROP_TYPE).isRequired /* This works fine */
}