React组件传参出现对象嵌套问题原因咨询

嘿，这问题我刚上手React的时候也踩过！其实核心原因很简单，是你对React函数组件接收参数的方式理解错了~

问题根源 #

React的函数组件的第一个参数是完整的props对象，而不是你单独传递的某个属性。你现在写的：

const Overview = items => {
  console.log(items);
  // ...
};

这里的items其实是组件收到的所有props的集合，而你通过Route的render方法传递的<Overview items={items} />，相当于给这个props对象加了一个items属性，所以打印出来就会是{ items: { 1551204339467: "Hi", ... } }，也就是你看到的嵌套结构。

解决方法 #

有两种简单的方式可以修正这个问题：

1. 解构props参数

直接在函数参数里解构出你需要的items属性，这样函数内部的items就是你传递的那个对象了：

const Overview = ({ items }) => {
  console.log(items); // 现在就能拿到正确的{ 1551204339467: "Hi", ... }
  return (
    <>
      <h1>Overview</h1>
      <ItemsList items={items} />
    </>
  );
};

2. 通过props对象访问属性

如果不想解构，也可以直接用props.items来获取你传递的值：

const Overview = props => {
  console.log(props.items); // 同样能拿到正确的对象
  return (
    <>
      <h1>Overview</h1>
      <ItemsList items={props.items} />
    </>
  );
};

额外提醒 #

不管是用Route的render方法传参，还是直接在组件上写属性，函数组件都会把所有传入的属性打包成一个props对象作为第一个参数接收。记住这个规则，以后就不会再遇到这种嵌套的困惑啦~

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