React使用props传递数组被包装为对象？父子组件传值接收异常问题

React 组件接收的所有传入属性都会被封装为一个props对象，你在父组件中通过movies={movies}的语法传值，等价于给props对象添加了一个键为movies、值为电影数组的属性。你在子组件中直接将整个props对象赋值给movies变量，最终拿到的自然是包含电影数组的props对象，而非数组本身。

有三种常见的修正方式，可根据开发习惯选择：

• 方法1：从props对象中显式取出movies属性

const MovieOverview = (props) => {
  const movies = props.movies;
  console.log(movies);
  // 后续逻辑
}

• 方法2：在参数位直接解构获取movies属性（代码更简洁，是业内常用写法）

const MovieOverview = ({ movies }) => {
  console.log(movies);
  // 后续逻辑
}

• 方法3：如果你使用TypeScript开发，可以补充类型约束避免同类问题

interface MovieOverviewProps {
  movies: IMovie[]
}
const MovieOverview = ({ movies }: MovieOverviewProps) => {
  console.log(movies);
  // 后续逻辑
}

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