Как использовать локальное хранилище в React функциональных компонентов - PullRequest
Новая
       14

Как использовать локальное хранилище в React функциональных компонентов

0 голосов
/ 15 апреля 2020

Как я могу использовать LocalStorage в таком функциональном компоненте, как этот

Я знаю, как это сделать в компоненте класса, но могу ли я решить эту проблему в этом случае?

ОШИБКА: Ошибка типа: хранилища не являются функцией 

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

1 Ответ

0 голосов
/ 16 апреля 2020

В вашем first useEffect, repositories - это ваше состояние массива. Не функция.

Кроме того, в вашем second useEffect вам нужно внести коррективы в способ доступа к prevState в хуках.

Исправлено для 1-го использования. Эффект 

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