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

Question

So I am in a situation where I have to change a particular property from an array of objects. When the property changes I want to rerender the component. Now, this works fine without any issues when use the setPropertyName of useState . But now I am just changing one property of the object instead of the entire object.

Here is the code that Im working on:

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

Calling the setMovieList and passing an array will obviously cause a rerender.

Consider the following contents of 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
}]

Then I have a function which renders the list:

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>
        )
    });
}

As you can see, when the checkbox is clicked it changes the value of the watched property. A few lines later I'm checking if movie.watched == true then show the <Rating> component. But in this case, I'm not using setMoviesList to update the moviesList and hence the <Rating> component is not visible.

How can I use setMoviesList to update watched property of the particular movie whose checkbox I click on?

Answer 1

Okay.. I solved it by the following way:

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}`}/>

The idx is the index that I am using from the map method. Initially I was afraid that I might have to loop over the entire array and get the object that matches the imdbID and then update its property.

Luckily I have the index while mapping over it, so I just used that to directly retrieve the object.

Dont know why I didnt think of this solution before posting.