我不知道如何在 React 中使用映射函数编辑数组项
I can't figure out how to edit array items using a map function in React
所以我已经尝试了好几天来解决以下问题:
movies [
{
id: 1,
name: 'Alpha',
rating: 0
},
{
id: 2,
name: 'Bravo',
rating: 0
},
{
id: 3,
name: 'Charlie',
rating: 0
}
]
我已经有办法添加和删除电影 to/from 这个数组,但我想为每个项目都有一个输入部分,其中评级状态将更新为输入的值。我一直在使用 'useReducer' 来协助解决这个问题,但我想我只是不确定 syntax/what 会是有效载荷吗?
我知道有一种方法可以做到 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} 对象的状态在输入更改时更新
如果您使用电影作为组件状态,您可以将其传递给您的 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>
所以我已经尝试了好几天来解决以下问题:
movies [
{
id: 1,
name: 'Alpha',
rating: 0
},
{
id: 2,
name: 'Bravo',
rating: 0
},
{
id: 3,
name: 'Charlie',
rating: 0
}
]
我已经有办法添加和删除电影 to/from 这个数组,但我想为每个项目都有一个输入部分,其中评级状态将更新为输入的值。我一直在使用 'useReducer' 来协助解决这个问题,但我想我只是不确定 syntax/what 会是有效载荷吗?
我知道有一种方法可以做到 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} 对象的状态在输入更改时更新
如果您使用电影作为组件状态,您可以将其传递给您的 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>