Question

我在单独的文件中创建了两个模型State和City。在该州进口城市。

州内可以有一系列城市。

以下代码可以正常使用。

State.js

let State = PropTypes.shape({
    name: React.PropTypes.string,
    cities: PropTypes.arrayOf(PropTypes.shape(City))
});

City.js

let City = PropTypes.shape({
    name: React.PropTypes.string,
    population: PropTypes.number
});

但是，当我将cities重写为

时

let State = PropTypes.shape({
    name: React.PropTypes.string,
    cities: PropTypes.arrayOf(City)
});

它给了我警告。

摘要：

cities: PropTypes.arrayOf(PropTypes.shape(City))有效。

cities: PropTypes.arrayOf(City)没有。

它给了我以下警告：

Warning: Failed propType: Property xx of component Xx has invalid PropType notation inside arrayOf. Check the render method of Yy.

我的问题是，City是Proptypes.shape，为什么我需要在Proptypes.shape(City)中再次提及Proptypes.arrayOf？

Answer 1

在您的代码中：

let City = PropTypes.shape({
  name: React.PropTypes.string,
  population: PropTypes.number
});

您使用的是什么版本的React？您从React.PropTypes和PropTypes引用PropTypes。你是如何导入PropTypes的？你在使用prop-types包吗？

我正在使用类似的场景，它对我有用。你的渲染是什么样的，为道具提供的数据是什么？

对我来说，以下绝对有效：

cities: PropTypes.arrayOf(City)

Answer 2

我遇到了同样的问题，而在我的情况下，这是因为在另一个文件之前加载了一个文件。

在您的情况下，可能是因为在您加载City.js时尚未加载State.js

Answer 3

我可以分享我的案例中的问题。这是导致错误的代码：

const answerPropType = PropTypes.shape({
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    followUps: PropTypes.arrayOf(followUpPropType)
})

const followUpPropType = PropTypes.shape({
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
})

问题是 followUpPropType 是在 answerPropType 之后声明的。所以我只是颠倒了他们的顺序：

const followUpPropType = PropTypes.shape({
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
})

const answerPropType = PropTypes.shape({
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    followUps: PropTypes.arrayOf(followUpPropType)
})

将Proptypes.shape传递给Proptypes.arrayOf做出反应

3 个答案: