React 在使用 props 时添加数组答案

【问题标题】：React adds array when using propsReact 在使用 props 时添加数组
【发布时间】：2021-10-27 12:40:01
【问题描述】：

我有一个将电影数组传递给子组件的组件：

const movies: IMovie[] = data.movies;
console.log(movies);

return (
  <React.Fragment>
    <DashboardMovieOverviewMenu />
    { movies.length > 0 ? <MovieOverview movies={movies} /> : null }
  </React.Fragment>
);

子组件：

const MovieOverview = (props) => {
  const movies = props;
  console.log(movies);
  ...
}

子组件中的电影对象有一个电影数组，它本身不是一个数组：

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

您正在像这样定义movies：

const movies = props;

这会将所有道具设置为moviesconst

由于props 是对象，我猜你要记住：

const movies = props.movies;

或者像这样使用object destruction：

const { movies = [] } = props;

【讨论】：

我不能在道具中使用任何对象：'movies' is missing in props validation eslintreact/prop-types。对象破坏也是如此。好的，我明白了。
该错误表明您忘记将 movies 属性添加到声明中。请参阅this question 了解更多详情。使用数组作为道具是非常基本的东西，应该可以正常工作；）成功！

【解决方案2】：

应该像下面这样解构

const MovieOverview = (props) => {
  const { movies } = props;
  console.log(movies);
  ...
}

或者你可以在 args 中解构

const MovieOverview = ({ movies }) => {
  console.log(movies);
  ...
}

【讨论】：

【解决方案3】：

在子组件中，您不会直接接收数组或任何其他格式的数据类型。来自父级的每个数据都必须通过一些有意义的名称（称为道具）传递给子级。

在子组件中接收时，您必须使用props.variablename。

在您的情况下，您传递了带有电影变量名称的电影列表。例如：<MovieOverview movies={movies} />

另一方面，在接收孩子时，您必须使用 props.movies 来读取电影列表数组。例如：const movies = props.movies;

【讨论】：