当 object 数组中的属性发生变化时，使用钩子对重新渲染组件做出反应

Question

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

这是我正在处理的代码：

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

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

考虑movieList的以下内容：

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 呈现列表：

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 来更新 moviesList，因此<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 匹配的 object，然后更新其属性。

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

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