破坏赋值与数组映射



我是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] };
不要使用#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中修复了突变问题,那么这几乎是一个偏好问题。

最新更新