React中如何通过console.log打印传给子组件的props属性值？

报错原因 #

你遇到的listItem未定义报错，是因为listItem是你传递给List组件的props属性名，仅在List组件的作用域内可以通过props访问，你当前编写console.log(listItem)的位置是App组件内部，该作用域下只有对应的数据源变量people，没有声明listItem变量，因此会触发未定义报错。

两种常用打印方案 #

方案1：在父组件（App）中打印要传递的内容 #

你传递给listItem的实际值就是people，直接打印该变量即可确认传参内容，两种写法可选：

• 写法1：在App组件return逻辑前打印

function App() {
  const [people, setPeople] = useState(data);
  // 直接打印即将传给List的people值，就是listItem对应的内容
  console.log('要传递的listItem值：', people);

  return (
    <div className="container">
      <h3>{people.length} birthdays today</h3>
      <List listItem={people} />
      
      <button onClick={() => setPeople([])}>Clear All</button>

    </div>
  );
}

• 写法2：传参时实时打印，不影响实际传参逻辑

<List listItem={console.log('传递时的listItem值：', people) || people} />

原理：console.log返回值为undefined，||运算符会返回第二个真值people，因此不会改变实际传递给List的props值。

方案2：在子组件（List）中打印实际接收的props #

该方法可以确认List组件实际接收到的props值，更精准，你需要在List组件的入参中接收props后再打印，示例：

// 写法1：完整接收props对象
function List(props) {
  console.log('List实际接收的listItem值：', props.listItem);
  // 后续组件逻辑...
}

// 写法2：解构获取listItem
function List({ listItem }) {
  console.log('List实际接收的listItem值：', listItem);
  // 后续组件逻辑...
}

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