React中使用console.log无法正确打印组件Props问题求助

你遇到的问题很典型——因为你传给GroceryListItem的grocery是一个JavaScript对象（比如{ name: "Apples" }），当你直接把它和字符串拼接时，JS会自动把对象转换成默认的字符串表示[object Object]，这就是控制台显示这个结果的原因。

下面给你几种解决方法，按需选择：

1. 直接访问对象的具体属性 #

如果你只需要打印水果名称，直接访问grocery对象的name属性就可以了，同时页面渲染也要做对应修改（不然页面上也会显示[object Object]）：

class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // 打印具体的名称
    console.log("Hi from GroceryListItem " + this.props.grocery.name);
    return (
      <li>
        {this.props.grocery.name} {/* 这里也要改成访问name属性 */}
      </li>
    );
  }
}

2. 打印整个对象的详细信息 #

如果你想查看整个grocery对象的所有内容，有两种更友好的方式：

• 使用console.log的多参数输出：这种方式能让控制台展开对象，方便查看结构

  console.log("Hi from GroceryListItem:", this.props.grocery);
  

• 用JSON.stringify把对象转成字符串：适合需要把对象内容拼进字符串的场景

  console.log("Hi from GroceryListItem " + JSON.stringify(this.props.grocery));
  

  输出结果会是类似Hi from GroceryListItem {"name":"Apples"}的格式。

另外给你提个小优化建议：你的父组件GroceryList里，每次循环都创建了一个<ul>标签，这会导致每个列表项都单独在一个无序列表里，布局不太合理。可以改成把<ul>放在循环外面，用map来生成列表项（这也是React里更推荐的写法），还要记得加key属性避免警告：

class GroceryList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groceries: [
        { name: "Apples"}, {name: "Orange"}, {name : "Banana"}
      ]
    };
  }
  render() {
    return (
      <ul>
        {this.state.groceries.map((item, index) => (
          <GroceryListItem key={index} grocery={item} />
        ))}
      </ul>
    );
  }
}

内容的提问来源于stack exchange，提问作者Kushal