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

Question

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

我知道如何在 class 组件中做到这一点，但在这种情况下我可以解决这个问题吗？

错误：TypeError：存储库不是 function

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));
    }
  });

Answer 1

在您的first useEffect中， repositories是您的 state 数组。 不是 function。

此外，在您的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

  });

要在 hooks 中获取之前的 state，可以编写一个小自定义 hook：像这样：

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]);