与本地存储一起使用的挂钩调用无效

Question

我有 3 个文件：

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

我在主组件中导入带有状态和重置文件的文件，一切正常。但是当我尝试使用重置功能将 localState 值设置为默认值时，我收到错误“错误：无效的挂钩调用。拦截器只能在功能组件的主体内部调用。 "

我阅读了有关 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");
};

Link to SandBox

Answer 1

我没有看到任何东西可以重置您的 resetLocalStorage() 中的所有状态。我假设您将跟踪所有“本地存储密钥”并为每个定义重置功能。 This example 修改您的钩子以返回第三个函数来重置状态，因此不需要定义另一个重置函数。

Answer 2

https://codesandbox.io/s/smoosh-sound-0yxvl?file=/src/App.js

我对您的代码进行了一些更改，以实现您想要实现的用例。 （让我知道我的实现足以满足您的用例）

resetLocalStorage 不是以use 开头的，这就是您收到上一个错误的原因。 将该函数重命名为useResetLocalStorage 后，它仍然无法工作，因为-

您正在调用按钮的自定义钩子 onClick。这打破了一个反应钩子规则，即react hooks must not be called conditionallyhttps://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level