重繪瀏覽器后顯示來自localStorage的收藏項-Next.js&Typescript專案-有解無憂

我正在用 Next.js 和 Typescript 做一個個人專案，我從 API 獲取一些資料。然后，我列出了一些專案。我想從中制作一個最喜歡的串列并將它們存盤在 localStorage 中。代碼作業正常，但如果我重繪瀏覽器，專案就會變得不受歡迎。但是，它們在 localStorage 中。我想在重繪后收藏這些專案。作為第二個問題，如果我也可以將最喜歡的專案放在其他專案之上，那就太棒了。我確定在這一行中我必須修復代碼，但我不知道如何：

{favourites.includes(value.properties.title) || (localStorage.getItem('favourite') !== null) ?

這是整個代碼：

import { GetStaticProps, InferGetStaticPropsType } from "next";

import { FaHeart } from "react-icons/fa";
import { FaRegHeart } from "react-icons/fa";
import styles from '../styles/Home.module.css'
import { useState } from "react";

type Data = {
  message: string;
  result: [
    {
      properties: {
        characters: string[];
        planets: string[];
        starships: string[];
        vehicles: string[];
        species: string[];
        created: string;
        edited: string;
        producer: string;
        title: string;
        episode_id: number;
        director: string;
        release_date: string;
        opening_crawl: string;
        url: string;
      };
    }
  ];
};

export const getStaticProps: GetStaticProps<{ swapis: Data }> = async () => {
  const res = await fetch("https://www.swapi.tech/api/films/");
  const swapis: Data = await res.json();

  return {
    props: {
      swapis
    }
  };
};

const Home = ({
  swapis
}: InferGetStaticPropsType<typeof getStaticProps>) => {
  console.log('swapis', swapis);

  const [searchFilm, setSearchFilm] = useState<string>('');
  const [favourites, setFavourites] = useState<Array<string>>([]);

  const addFav = (props: any) => {
    let array = favourites;
    let addArray = true;
    array.map((item: any, key: number) => {
      if (item === props.value.properties.title) {
        array.splice(key, 1);
        addArray = false;
      }
    });
    if (addArray) {
      array.push(props.value.properties.title)
    }
    setFavourites([...array])
    localStorage.setItem('favourites', JSON.stringify(favourites));

    var storage = localStorage.getItem('favItem'   (props.value.properties.title) || '0')
    if (storage == null) {
      localStorage.setItem(('favItem'   (props.value.properties.title)), JSON.stringify(props))
    } else {
      localStorage.removeItem('favItem'   (props.value.properties.title))
    }
  }
  

  return (
    <>
      <h1>List of Films</h1>
      <div className={styles.containerTable}>
        <input type="text" value={searchFilm} placeholder="Search films.." onChange={e => setSearchFilm(e.target.value)} />
      </div>
      {Object.entries(swapis?.result || {})
      .filter(([key, value]) => {
        if (!searchFilm) return true;
        if (value.properties.title.toLowerCase().includes (searchFilm)) return true;
        return false;
      })
      .map(([key, value]) => (
        <table key={key} className={styles.containerTable}>
          <tr className={styles.films}>
            <td className={styles.films}>{value.properties.title} {favourites.includes(value.properties.title) || (localStorage.getItem('favourite') !== null) ? (
              <FaHeart onClick={() => addFav({ value })} />
            ) : (
              <FaRegHeart onClick={() => addFav({ value})} />
            )}</td>
          </tr>
        </table>
      ))}
    </>
  );
};

export default Home;

uj5u.com熱心網友回復：

我會根據你的問題將答案分成兩部分。

問題 - 將喜歡的電影存盤到 localStorage 中，并在重繪頁面后保存它們。

只是一些注意事項

如果您使用addFav方法的目的只是在 localStorage 中切換最喜歡的電影，那么我認為您撰寫的業務邏輯太復雜了。我會把它分成addFav和removeFav方法，就是這樣。

const addFav = (id) => {
    setFavourites([...favourites, id]);
};

const removeFav = (id) => {
    setFavourites([...favourites.filter((found) => found !== id)]);
};

// Store in localstorage if favourites variable changes
useEffect(() => {
    localStorage.setItem("favourites", JSON.stringify(favourites));
}, [favourites]);

重繪頁面后看不到收藏項的原因是因為favourites變數始終[]在Home組件首次呈現時設定。

const [favourites, setFavourites] = useState(
    JSON.parse(localStorage.getItem("favourites")) || []
);

我不會使用電影名稱作為標識，因為您無法確定 API 回應中的密鑰是唯一的。

問題 - 首先列出最喜歡的

我個人會將過濾膜陣列分成 2 個陣列

這是https://codesandbox.io/s/strange-buck-voy0z?file=/src/App.js，其中最喜歡的電影在更改狀態后立即排序為第一。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387154.html

標籤：打字稿下一个.js 本地存储

上一篇：如果該值未定義，打字稿是否有關于回傳值或拋出例外的語法糖？

下一篇：為什么打字稿不能正確推斷T[K]與<TextendsPerson,KextendskeyofT>generic？