如何在conosle中调试我的数据？

Question

我有一些反应代码可以在UI中呈现各种面板。

我正在尝试调试，但是当我使用控制台语句来显示sportsTopBar.propTypes时，它会打印[object Object]。当我使用JSON.stringify时，它打印为空。

那么如何在控制台中调试我的结构？

以下提供的代码段。代码可以在小提琴中完整地看到。

代码段

sportsTopBar.propTypes = {
    sports-layout: React.PropTypes.string.isRequired,
    sportsPanelState: React.PropTypes.object.isRequired,
    sports: React.PropTypes.object.isRequired
};

console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);
console.log("sportsTopBar.propTypes--->" + JSON.stringify(sportsTopBar.propTypes));

输出

sportsTopBar.propTypes--->[object Object]
sportsTopBar.propTypes--->{}

Answer 1

问题1

语法错误

sports-layout:应为"sports-layout":

问题2

您隐式转换为字符串

你对这个答案的评论让我意识到这一切是什么。您希望在控制台中查看此对象的外观，并且无法按预期输出该对象。所以，这一行：

console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);

是否存在使用+将前导字符串连接到您希望在控制台中看到的值的问题。这个连接导致隐式转换为对象的字符串，因此[object Object]的输出您希望看到实际对象。 [object Object]是对象的toString输出。

因此，为了将这些记录在同一输出中，您需要利用console.log的多个参数允许：

console.log("sportsTopBar.propTypes--->", sportsTopBar.propTypes);

请注意，我所做的是将+替换为,。现在每个都将按照给定的方式记录，而不会对它们进行强制转换。

问题3

JSON不能代表函数

每JSON.org：

  

JSON基于两种结构：

     

  

• 名称/值对的集合。在各种语言中，这被实现为对象，记录，结构，字典，哈希表，键控列表或关联数组。

  

• 有序的值列表。在大多数语言中，这被实现为数组，向量，列表或序列。

  

我认为React.PropTypes.string.isRequired是一个函数。因此，具有引用该函数的属性的任何对象的序列化输出将不包含该属性/方法的表示。此外，您的对象包含仅对该函数的引用，因此生成的序列化（在剥离函数之后）是空对象的表示：{}。