如何在功能组件 React 中使用本地存储答案

【问题标题】：How use Local Storage in Functional Component React如何在功能组件 React 中使用本地存储
【发布时间】：2020-07-28 20:50:46
【问题描述】：

如何在这样的功能组件中使用 LocalStorage

我知道如何在类组件中执行此操作，但在这种情况下我可以解决这个问题吗？

错误：TypeError：存储库不是函数

export default function Main() {
  const [newRepo, setNewRepo] = useState('');
  const [repositories, setRepositories] = useState([]);
  const [clearInput] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    repositories(localStorage.getItem('repositories'));

    if (repositories) {
        setRepositories(JSON.parse(repositories));
    }
  }, [repositories]);

  useEffect((_, prevState) => {
    if (prevState.repositories !== repositories) {
        localStorage.setItem('repositories', JSON.stringify(repositories));
    }
  });

【问题讨论】：

看起来你使用本地存储很好......你想让这部分工作的问题_, prevState需要知道效果中的先前状态吗？
当我返回存储库页面时，我希望存储库继续显示
您可以在以下位置访问存储库：github.com/paulorod07/ListGitHubRepositories 我有这个错误：× TypeError: repositories is not a function
repositories 是一个 const ，它存储当前状态，最初是一个数组。以下行没有意义：repositories(localStorage.getItem('repositories'));

标签： javascript reactjs local-storage react-hooks

【解决方案1】：

在您的first useEffect 中，repositories 是您的状态数组。不是函数。

此外，在您的second useEffect 中，您需要更正您在挂钩中访问 prevState 的方式。

修复第一次使用效果

export default function Main() {
  const [newRepo, setNewRepo] = useState('');
  const [repositories, setRepositories] = useState([]);
  const [clearInput] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const localRepoItems = localStorage.getItem('repositories');

    if (localRepoItems) {
        setRepositories(JSON.parse(localRepoItems));
    }

  }, []); // do not give the dependency as repositories as it will go to infinite loop

  });

要在钩子中获取先前的状态，您可以编写一个小的自定义钩子： 像这样：

export const usePrevious = value => {
  const ref = React.useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

在您的组件中的用法：

const prevRepositories = usePrevious(repositories);
useEffect(() => {
    if (prevRepositories.length !== repositories.length) {
        localStorage.setItem('repositories', JSON.stringify(repositories));
    }
  }, [repositories]);

【讨论】：