0

我正在尝试为 Zusand 中的分级电影状态创建一个函数。

状态由一组对象组成，例如有两个条目：

  ratedMovies: [
    { imdbID: "tt0076759", userRating: "5" },
    { imdbID: "tt0080684", userRating: "10" },
  ]

以下是管理ratedMovies 更改的功能。这就是问题所在。我希望它检查在ratedMovies 状态中是否存在具有相同 imdbID 的对象。如果是这样更新它的值，而不是添加另一个具有相同 imdbID 但新值的对象。

如果我尝试更改上述状态示例中的一部电影的评分（它们处于状态 ofc），我会收到 IF 控制台检查，并且应用程序因错误而崩溃： TypeError: Cannot create property 'userRating' on number '0'

如果状态为空或者我更改了其他电影的评分，我会得到 ELSE 控制台检查，但它们仍然没有添加到状态中。

addUserRating: (rating) => {
    console.log("rating object", rating)
    set((state) => {
      if (state.ratedMovies.find((movie) => movie.imdbID === rating.imdbID)) {
        console.log("add rating IF")
        let index = state.ratedMovies.findIndex(
          (movie) => movie.imdbID === rating.imdbID
        )
        index.userRating = rating.userRating
        return [index, ...state.ratedMovies]
      } else {
        console.log("add rating ELSE")
        return [rating, ...state.ratedMovies]
      }
    })
  }

可以对电影进行评分的输入上的 onChange 函数会创建一个与状态数组中相同的对象，并将其传递给管理ratedMovies 状态的函数：

  const changeUserMovieRating = (event) => {
    const movieRating = {
      imdbID: modalDetails.imdbID,
      userRating: event.target.value,
    }
    console.log(movieRating)
    addUserRating(movieRating)
  }

其输出为：

{imdbID: 'tt0120915', userRating: '2'}

我希望我能清楚地解释一切，我将非常感谢有关如何解决此问题的任何提示，在此先感谢！

4

1 回答 1

0

抱歉，但我在提出这个问题时所采用的整个方法毫无意义，必须完全重新设计。

我决定在获取过程中不添加参数，因为在另一个组件中可以获取相同的数据。所以我决定将“userRating”的值保留在本地存储中，如果获取的电影已经被“用户”评级过，则将显示该值。

于 2021-12-06T23:29:00.203 回答