我不知道如何在 React 中使用 map 函数编辑数组项答案

【问题标题】：I can't figure out how to edit array items using a map function in React我不知道如何在 React 中使用 map 函数编辑数组项
【发布时间】：2020-08-24 21:33:09
【问题描述】：

所以我几天来一直在尝试解决以下问题：

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

我已经有一种方法可以在该数组中添加和删除电影，但我希望每个项目都有一个输入部分，其中评级状态将更新为输入值。我一直在使用“useReducer”来帮助解决这个问题，但我想我只是不确定语法/有效负载是什么？

我知道有一种方法可以做 movies.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} 对象的状态在输入更改时更新

【问题讨论】：

请发布所需的输出
```
{movies.map(movie => (
{movie.name}
))}
``` 像这样，movie.rating 对象的状态在输入更改时更新

标签： arrays reactjs use-state use-reducer

【解决方案1】：

如果您使用电影作为组件状态，您可以将其传递给您的 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 = (e, rating, id) => { setMovies(movies.map(movie => { if(movie.id === id) { return {...movie, rating: e.target.value} } return movie })) console.log(movies,rating,id) } ``` 谢谢你的帮助！！

【解决方案2】：

您可以通过将函数与事件链接起来轻松地做到这一点。所以您的事件处理程序将如下所示：

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>

【讨论】：