Question

我在详细信息页面中显示公司信息（来自公司列表，通过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`."

我还有很新的反应，所以我想我的API可能不会返回数组，但是当我将公司的道具定义切换为＆＃34; object＆＃34;我得到了相反的警告 - 接收数组，期待对象，所以这是一个我无法找到出路的圈子。

有没有人见过类似的东西？是公司道具还是API的问题？

非常感谢

Answer 1

错误消息非常自我解释：您传递的值是包含公司数据的单个对象。所以正确的道具类型是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])
    }
}

但是这会破坏整个道具类型的目的，所以你应该确保总是将一个数组或一个对象传递给该组件。

React的无效道具类型＆＃39;数组＆＃39;预期＆＃39;对象＆＃39;

1 个答案: