解构赋值 vs array.map

Question

我是 ReactJs 的新手，对这两种方法有疑问：

1：

handleLike = movie => {
  const movies = this.state.movies.map(m => {
    if (m._id === movie._id) m.liked = !m.liked;

    return m;
  });

  this.setState({ movies });
};

2：

handleLike = movie => {
  const movies = [...this.state.movies];
  const index = movies.indexOf(movie);
  movies[index] = { ...movies[index] };
  movies[index].liked = !movies[index].liked;

  this.setState({ movies });
};

Q1：这两种方法只是切换喜欢并正常工作，但我想知道有什么优点吗？

Q2：第二种方法中这一行的目的是什么：

  movies[index] = { ...movies[index] };

Answer 1

不要使用#1，至少不是它的写法。 您正在改变旧状态，这很容易导致反应中出现错误，假设该状态是不可变的。 您确实创建了一个新数组，这很好，但是您并没有在数组内创建新元素。 如果您要更改数组中的一个对象，则需要在修改该对象之前复制该对象。

做#1 的更好方法是：

handleLike = movie => {
  const movies = this.state.movies.map(m => {
    if (m._id === movie._id) {
      const copy = { ...m };
      copy.liked = !m.liked;
      return copy;
    }
    return m;
  });

  this.setState({ movies });
};

这样也可以解决您关于#2 的问题：

Q2：第二种方法中这一行的目的是什么： movies[index] = { ...movies[index] };

这样做的目的是制作电影的副本。 这使您可以更改副本，而无需修改旧状态。

Q1：这两种方法只是切换喜欢并正常工作，但我想知道有什么优点吗？

如果您解决了#1 中的突变问题，那么这几乎是一个偏好问题。