我已经用 typescript 对自定义挂钩错误做出反应

Question

I have this error in VScode: Argument of type 'Animal[]' is not assignable to parameter of type 'string'. my custom hook file(useLocalHost.tsx) is:

import React, { useState, useEffect, SetStateAction, Dispatch } from "react";
import { Animal } from "@frontendmasters/pet";

function getSavedValue(key: string, initialValue: string) {
  
  const savedValue = JSON.parse(localStorage.getItem(key) || '{}');

  if (savedValue) {
    return savedValue;
  }

  return initialValue;
}

export default function useLocalStorage(key: string, initialValue: string) {
  const [value, setValue] = useState(() => {
    return getSavedValue(key, initialValue);
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);
  return [value, setValue] as [Animal[], Dispatch<SetStateAction<Animal[] | null>>];
}

my search file (searchParams.tsx) is:

import React, { useState, useEffect, useContext, FunctionComponent } from "react";
import pet, { ANIMALS, Animal } from "@frontendmasters/pet";
import useDropdown from "./useDropdown";
import { RouteComponentProps } from '@reach/router';
import SearchResult from "./SearchResult";
import useLocalStorage from "./useLocalStorage";
import ThemeContext from "./ThemeContext";

const SearchParams: FunctionComponent<RouteComponentProps> = () => {
  const [location, updateLocation] = useState("Seattle, WA");
  const [breeds, updateBreeds] = useState([] as string[]);
  const [pets, updatePets] = useState([] as Animal[]);
  const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
  const [breed, BreedDropdown, updateBreed] = useDropdown("Breed", "", breeds);
  const [prevPet, setPrevPet] = useLocalStorage([] as Animal[], "");
  const [theme, setTheme] = useContext(ThemeContext);

  async function requestPets() {
    const { animals } = await pet.animals({
      location,
      breed,
      type: animal,
    });
    setPrevPet(animals);
    updatePets(animals || []);
  }

  useEffect(() => {
    updateBreeds([]);
    updateBreed("");
    pet.breeds(animal).then(({ breeds }) => {
      const breedStrings = breeds.map(({ name }) => name);
      updateBreeds(breedStrings);
    }, console.error);
  }, [animal]);

  useEffect(() => {
    updatePets(prevPet);
  }, []);

I know that the error comes from the type of prevPet put I don't know what type it should be there is more in searchParams.tsx but I think it's not needed

Answer 1

Your getSavedValue function has bugs in it.

const savedValue = JSON.parse(localStorage.getItem(key) || '{}');

I think this should be

const savedValue = JSON.parse(localStorage.getItem(key) || {});

Otherwise the return type of your function can be an object or a string (when nothing was in the storage).

Also, savedValue will never be falsy, so you will never return initialValue .

Moreover, you call the hook with the params in the wrong order.

Here is a typed alternative:

import React, { useState, useEffect } from "react";

function getSavedValue<T>(key: string, initialValue: T): T {
  const stored = localStorage.getItem(key);

  if (stored) {
    return JSON.parse(stored) as T;
  }

  return initialValue;
}

export default function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => getSavedValue(key, initialValue));

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);
  
  return [value, setValue] as const;
}

You can use it like this:

const [prevPet, setPrevPet] = useLocalStorage<Animal[]>("key", []);