如何在打字稿中使用 prevstate 到本地存储（反应）

Question


type allergyProps = {
  filterAllergy: allergyArray[];
  setRemoveAllergy: Dispatch<SetStateAction<string>>;
  setSearchAllergy: Dispatch<SetStateAction<string>>;
};

type allergyArray = {
  id: number;
  name: string;
};

const Allergy = ({ setSearchAllergy, filterAllergy }: allergyProps) => {
  const [isInput, setIsInput] = useState(false);
  const [removeAllergy, setRemoveAllergy] = useState<string[]>([]);
  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.value) {
      setIsInput(true);
    } else {
      setIsInput(false);
    }
    setSearchAllergy(e.target.value);
  };
  const click = (e: React.MouseEvent<HTMLButtonElement>) => {
    let value = e.currentTarget.name;
    setRemoveAllergy([...removeAllergy, value]);
    localStorage.setItem("allergy", removeAllergy); << #####error point !#######
  };

错误名称是 'string[]' 类型的参数不可分配给 'string'.

类型的参数

   29 |     let value = e.currentTarget.name;
   30 |     setRemoveAllergy([...removeAllergy, value]);
 > 31 |     localStorage.setItem("allergy", removeAllergy);
      |                                     ^^^^^^^^^^^^^
   32 |   };

我想为 setItem 使用 prevState, 如何使用数组类型的prevState？

Answer 1

localStorage 不能保存除字符串以外的任何数据类型。如果你还想强制，可以把数组转成字符串，然后放到localStorage中，如下：

localStorage.setItem("allergy", JSON.stringify(removeAllergy));

当你想从 localStorage 中读取时，你需要这样做才能将其恢复为数组形式：

JSON.parse(localStorage.getItem("allergy"));

如何在打字稿中使用 prevstate 到本地存储（反应）

how to use prevstate to localstorage in typescript(react)

types

typescript

reactjs