Javascript 使用本地存储的工作中的钩子调用无效

我有3个文件：

• 主要成分,
• 包含存储在本地存储中的状态的文件
• 具有重置功能的文件，用于将这些相同状态重置为默认状态 价值观

我在主组件中导入带有状态和重置文件的文件，一切正常。但当我尝试使用reset函数将localState值设置为default时，我得到了错误“error:Invalid hook call.Interceptors只能在函数组件的主体内调用。”

我阅读了react上的文档，但不理解错误

第一个文件代码：

import React from "react";
import { LocalStorage } from "./localState";
import { resetLocalStorage } from "./resetLocalState";

function App() {
  const localState = LocalStorage(); // local storage keys
  const resetState = () => resetLocalStorage(); // reset local storate states

  return (
    <div>
      <button onClick={() => resetState()}>Refresh State to default</button>
      <br />
      <button
        onClick={() => localState.setLocalStorageState("State was changed")}
      >
        Change State
      </button>
      <p>{localState.localStorageState}</p>
    </div>
  );
}

export default App;

import { useState, useEffect } from "react";

const useLocalStorageList = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
  const initial = stored ? JSON.parse(stored) : defaultValue;
  const [value, setValue] = useState(initial);

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

  return [value, setValue];
};

//local storage keys
export const LocalStorage = () => {
  const [localStorageState, setLocalStorageState] = useLocalStorageList(
    "State",
    "Default Value"
  );

  return { localStorageState, setLocalStorageState };
};

第三文件代码

import { LocalStorage } from "./localState";

export const resetLocalStorage = () => {
  const localState = LocalStorage(); //local storage keys
  localState.setLocalStorageState("Default Value");
};

为了实现您试图实现的用例，我对您的代码做了一些更改。（让我知道我的实现满足您的用例）

resetLocalStorage不是以

use

开头的，这就是您收到上一个错误的原因。 将该函数重命名为

useResetLocalStorage

后，它仍然无法工作，因为-

---

您在单击按钮时调用了自定义钩子。这违反了一条react钩子规则，

react钩子不能有条件地调用

我在您的

resetLocalStorage（）中没有看到任何重置所有状态的内容

。我假设您将跟踪所有“本地存储密钥”，并为每个密钥定义重置函数。修改挂钩以返回第三个函数来重置状态，这样就不会定义另一个重置函数。

将本地存储转换为自定义挂钩，自定义挂钩应以“使用”开头"。重置函数不是有效的钩子。钩子必须位于函数组件的主体中，而您的钩子是组件内部函数的一部分。这是不允许的。您试图实现什么？在我看来，这对于您的使用来说太复杂了case@messerbill例如，我的真实代码更大，因此我想拆分我的代码分成小部分您可以解释保留

resetLocalState.jsx

（您还可以将其名称更改为

useResetLocalStorage

）的意义，同时直接使用设置和重置按钮的

useLocalStorage

。

resetLocalState.jsx

可以删除。现在不需要了。（我以重命名作为第一步，正如我在回答中提到的那样，它不起作用）例如，我在这里和沙盒上的代码是，我的真实代码更大，因此我想将我的代码分成几个小部分。您的解决方案可以工作，但它会创建许多不必要的代码，因为我有许多状态，如果您应用您的解决方案，那么每个状态都有自己的setState，但我需要所有状态（大约有70个）一次单击即可重置为默认值