如何优化映射中突变的初始化

Question

如何优化这种每部电影都有自己的变异初始化的代码。 我知道我应该将突变的初始化放在 MoviesPage 文件的顶部，但这不是我拥有电影的唯一页面，而且我有很多突变，例如添加到观看列表和其他内容。

export default async function MoviesPage() {
  const movies = await getMovies() // 100 movies
  return (
    <div>
      {movies.map(movie => (
        <Movie key={movie.id} movie={movie} />
      ))}
    </div>
  )
}

// Movie Component
import { useMutation } from '@tanstack/react-query'


function Movie(movie: TMovie) {
  const { mutate } = useMutation({mutationFn:()=> ...})

  return (
    <div onClick={() => mutate(movie)}>
      <image src={movie.posterPath} />
    </div>
  )
}

Answer 1

如果我做对了，你的代码就已经没问题了，因为将为列表中的每部电影创建 Movie 组件，并且每个 Movie 组件将使用自己的mutationFn 运行 useMutation 钩子。

我敢建议你想将你的突变封装到一个地方，以便在不同的组件中重用它？如果是这样，您需要创建一个自定义挂钩，其中将包含您的所有业务逻辑和对电影的所有操作：

import { useMutation } from '@tanstack/react-query';

const useMovieActions = (movie) => {
    const { mutate: update } = useMutation({
        mutationFn: (updatedMovie) => axios.post(`/movies/${movie.id}`, updatedMovie)
    });

    const { mutate: addToWatchList } = useMutation({
        mutationFn: () => axios.post(`/watch-list`, movie.id)
    });

    const { mutate: like } = useMutation({
        mutationFn: () => axios.post(`/likes`, movie.id)
    });

    return {
        update,
        addToWatchList,
        like,
    }
};

然后在你的组件中使用它，如下所示：

function Movie(movie: TMovie) {
    const { update, like, addToWatchList } = useMovieActions(moview)

    return (
        <div onClick={() => update(movie)}>
            <image src={movie.posterPath}/>
            <button onClick={like()}>Like</button>
            <button onClick={addToWatchList()}>Add to watch list</button>
        </div>
    )
}

这样，您的组件就不知道您的 api 是什么样子，也不知道如何将业务操作转换为 api，因此，将其从组件中隐藏起来并只留给它们渲染和处理用户交互始终是一个很好的做法。