Question

React 的无效 prop 类型“array”应为“object”

2017-04-29

9208

reactjs

我在详细信息页面中显示公司信息（来自公司列表，通过 React Link 在参数中发送 ID）

现在我们讨论详细信息页面。我收到 ID，调用 json 数组的 api：

 {"_id":"58f7f61cff8d4014d7f7730b","company_name":"Vodafone" .... }

并期望它为：

export default class Detail extends Component {
  static propTypes = {
    getCompany: PropTypes.func.isRequired,
    **company**: PropTypes.array,
  }

一切正常，已接收并显示，但我仍然收到警告：

"Warning: Failed prop type: Invalid prop `company` of type `object` supplied to `Detail`, expected `array`."

我对 React 还很陌生，所以我想也许我的 API 没有返回数组，但是当我将 company 的 prop 定义切换为“object”时，我收到了相同的警告，但问题相反 - 接收数组，期望对象，所以这是一个我找不到出路的循环。

以前有人见过类似的东西吗？是 company prop 还是 API 的问题？

非常感谢

Answer 1

错误消息非常容易理解：您传递的值是包含公司数据的单个对象。因此，正确的 prop 类型应为 PropTypes.object ，如下所示：

export default class Detail extends Component {
    static propTypes = {
        getCompany: PropTypes.func.isRequired,
        company: PropTypes.object
    }
}

如果您的数据有时是数组，有时是对象，则可以使用以下方法：

export default class Detail extends Component {
    static propTypes = {
        getCompany: PropTypes.func.isRequired,
        company: PropTypes.oneOf([PropTypes.object, PropTypes.array])
    }
}

但这有点违背了整个 prop 类型的目的，因此您或许应该确保始终将数组或对象传递给组件。