如何确保 useState 数组中的所有项目在使用本地存储时都是唯一的，并且我有多个相同的项目存储在 ls 中

Question

const [watchList, setWatchlist] = React.useState([])

 React.useEffect(() => {
  setWatchlist(ls('myList'))
  
 },[])
 function setWatchListAction(mylist) {
    setWatchlist(mylist)
 }
  

 const addToMyList = (media) => {
// Heres where i add my data 
  let myList;
  if(ls("myList") !== null){
    myList = ls("myList")
    myList.push(media)
    ls.set("myList", myList)
    setWatchlist(myList)
   
    
  } else {
    ls.set("myList", [media])
     window.location.reload(false)
  
  }

 }

 const RemoveFromList = (mediaId) => {
  
  let newlist = []
   let myList = ls("myList")
    myList.filter((items) => {
    if(items.id !== mediaId.id){
       newlist.push(items)
     }
   })
  
   ls("myList", newlist)
   setWatchlist(newlist)
 }

当我单击按钮将电影添加到观看列表时，我希望它检查该电影是否已在本地存储中，如果是，我不希望它再次添加同一部电影。我希望我的本地存储就像一个包含独特项目的集合。我现在遇到的问题是我将同一部电影多次放入本地存储中。

Answer 1

const addToMyList = (media) => {
// Heres where i add my data 
  let myList;
  if(ls("myList") !== null){
    myList = ls("myList")
    myList.push(media)
    ls.set("myList", myList)
    setWatchlist(myList)
   
    
  } else {
    ls.set("myList", [media])
     window.location.reload(false)
  
  }

 }

在上述方法中，每当您尝试添加新媒体时，请先检查本地存储中是否已存在媒体

    const findMedia = myList.find(x => x === media)
    if(!findMedia) {
      myList.push(media);
      myList.push(media)
      ls.set("myList", myList)
      setWatchlist(myList)
    }