当对象数组中的属性更改时，使用钩子重新渲染组件

Question

所以我处于必须从对象数组更改特定属性的情况。当属性更改时，我想重新渲染组件。现在，使用useStatesetPropertyName时，这工作正常，没有任何问题。但是现在我只是更改对象的一个属性，而不是整个对象。

这是我正在处理的代码：

const [movieList, setMovieList] = useState([]);

调用 setMovieList 并传递数组显然会导致重新渲染。

考虑电影列表的以下内容：

movieList = [
{
'name': 'Mulholland Dr.'
'year':2001,
'watched' : true,
'rating':0
},
{
'name': 'Zodiac'
'year':2007,
'watched' : false,
'rating':0
},
{
'name': 'Twin Peaks'
'year':2017,
'watched' : true,
'rating': 0
}]

然后我有一个渲染列表的函数：

function showMovieList () {
return movieList.map((movie) => {
return (
<List.Item key={movie.imdbID}>
<div className="watchedCheckBoxContainer">
<input type="checkbox" onChange={(event) => movie.watched = event.target.checked} id={`cb1${movie.imdbID}`}/>
<label htmlFor={`cb1${movie.imdbID}`}><Image size='tiny' src={movie.Poster} /></label>
</div>
{/* <Image size='tiny' src={movie.Poster} /> */}
<List.Content>{movie.Title}</List.Content>
{movie.watched ? <Rating maxRating={5} onRate={(event, {rating}) => movie.userRating=rating}/> : null}

</List.Item>
)
});
}

如您所见，单击该复选框时，它会更改监视属性的值。几行后，我正在检查movie.watched == true是否然后显示<Rating>组件。但在这种情况下，我没有使用 setMoviesList 来更新电影列表，因此<Rating>组件不可见。

如何使用setMoviesList更新我单击其复选框的特定电影的观看属性？

Answer 1

好的。我通过以下方式解决了它：

function onMovieWatched (watched, index) {
const tempMoviesList = [...movieList];
tempMoviesList[index].watched = watched;
setMovieList(tempMoviesList);
}
<input type="checkbox" onChange={(event) => onMovieWatched(event.target.checked, idx)} id={`cb1${movie.imdbID}`}/>

idx是我从 map 方法中使用的索引。 最初，我担心我可能必须遍历整个数组并获取与 imdbID 匹配的对象，然后更新其属性。

幸运的是，我在映射它时有索引，所以我只是用它来直接检索对象。

不知道为什么我在发布之前没有想到这个解决方案。