Question

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

这是我正在处理的代码：

useState

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

请考虑movieList的以下内容：

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

然后我有一个呈现列表的函数：

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
}]

如您所见，单击复选框时，它将更改watched属性的值。几行后，我正在检查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组件。但是在这种情况下，我没有使用setMoviesList来更新movieList，因此<Rating>组件不可见。

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

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匹配的对象，然后更新其属性。

幸运的是，我在映射索引时具有索引，因此我只是使用它直接检索对象。

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

当对象数组中的属性更改时，使用挂钩对rerender组件进行反应

1 个答案: