React JS：在控制台中记录数组项

Question

我有一个对象数组，我需要在其中逐一查看对象内的每个项目及其在对象内的属性。当我尝试通过在代码中使用 console.log(listItems); 并在控制台中的 Google Chrome 中进行检查来查看对象时我得到的选项卡；

listofItems: [object Object],[object Object],[object Object],[object Object] ...

但我需要的是在包含多个对象的数组中查看Items内部的属性和属性以及分配给它们的各自值。我已经试过了

console.log(JSON.stringify(listItems));

但最终出现错误：

Uncaught TypeError: Converting circular structure to JSON --> 
   starting at object with constructor 'FiberNode' | property 'stateNode' -> ...

考虑下面的代码片段：

render() {
        let { items } = this.props;
        let listItems = items.map( (item) => {
            return (
                    <TodoItem text={item.text} 
                       ID={item.key} 
                       isComplete={item.completedItem} 
                       onDelete={this.props.onDelete} 
                       onEdit={this.props.onEdit} 
                       handleComplete={this.props.handleComplete}/>
            );
        });
        console.log("listofItems: " + listItems);
....

有什么方法可以查看数组中每个对象的属性和赋值...？

Answer 1

使用逗号代替 +。

console.log("listofItems: ",  listItems);

这样 javascript 不会尝试将其转换为字符串，chrome 控制台会让您扩展对象数组

React JS：在控制台中记录数组项

React JS : Logging the array items in the console

arrays

reactjs

object

console

console.log