我不知道如何在React中使用映射功能来编辑数组项

问题描述

所以我一直在努力解决以下问题：

movies [
{
     id: 1,name: 'Alpha',rating: 0
},{
     id: 2,name: 'Bravo',{
     id: 3,name: 'Charlie',rating: 0
}
]

我已经有办法向该数组添加电影或从中删除电影，但是我想为每个项目都有一个输入部分，其中评级状态将更新为输入值。我一直在使用'useReducer'来解决这个问题，但我想我只是不确定语法/有效载荷是什么？

我知道有一种方法可以制作movie.map（movie => {etc.etc。}，但我似乎无法弄清楚。非常感谢您的帮助。

编辑：

<div>
{movies.map(movie => (
    <h1>{movie.name}</h1>
    <input placeholder={movie.rating}
    onChange={//I WANT THE MOVIE.rating TO CHANGE ON INPUT CHANGE//}
    />
))}
</div>

我希望输出看起来像这样，其中{movie.rating}对象的状态在输入更改时进行更新

解决方法

如果您将电影用作组件状态，则可以将其传递给onChange函数：

const updateRatingOnly = (id,rating) => {
    movies = movies.map(movie => {
      if(movie.id === id){
       return{...movie,rating}
      }
      return movie
    })

   setMovies(movies)

   //or

   this.setState({movies})
}

,

您可以通过将功能与事件链接在一起来轻松实现此目的。因此，您的事件处理程序将如下所示：

const handleRatingChange = (movie) => ({target: {value}) => {
  //useReducer logic
  //movie = movie name
  //value = new rating
};

<div>
{movies.map(movie => (
    <h1>{movie.name}</h1>
    <input placeholder={movie.rating}
    onChange={handleRatingChange(movie.name)}
    />
))}
</div>