Использование localStorage для возврата последнего поиска

Question

Я сейчас использую React и пытаюсь заставить свое локальное хранилище обновлять состояние, как только событие обрабатывает возврат при поиске, а затем удерживать это состояние до завершения следующего поиска. Сейчас я не могу понять, куда поместить обработчик событий, который вызывает правильное состояние и содержит правильное значение.

    const useStateWithLocalStorage = localStorageKey => {
      const [value, setValue] = React.useState(
        localStorage.getItem(localStorageKey) || ''
      );
      React.useEffect(() => {
        localStorage.setItem(localStorageKey, value);
      }, [value]);
      return [value, setValue];
    };
    export default function App() {
      const [value, setValue] = useStateWithLocalStorage(
        'myValueInLocalStorage'
      );
      const onChange = event => setValue(event.target.value);
      const [state, setState] = useState({
        message: 'test deploy',
        results: [],
        value: '',
      });
    ...

и где я пытаюсь реализовать обработчик событий

    export default function SearchAppBar(props) {
      const classes = useStyles();
      const [searchTerm, setSearchTerm] = useState('');
      const { onClick } = props;
    ...
            <InputBase
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
            <Button onClick={() => onClick(searchTerm)}> Search </Button>```

Answer 1

Мне нравится подход, использованный приставкой к обработке состояний реагирования. Я использую redux с библиотекой redux-persist для сохранения состояния вместо localStorage. Если ваш проект растет и вам нужно работать с более сложными состояниями, это может вам помочь.

Answer 2

Настоящим мое решение. Я создал функцию useLocalStorage, которая хранит и получает или устанавливает элементы в локальном хранилище и сохраняет их в своем собственном состоянии:

import React from "react";

export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = React.useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
};

export default useLocalStorage;

Для компонента searchBar я использовал forwardRef для доступа к значение входа внутри нашего высшего компонента App. Функция newSearch и переменная searchTerm удалены из реквизита. Заполнитель содержит сохраненное значение в localStorage, которое составляет searchTerm:

export const SearchAppBar = React.forwardRef(
  ({ newSearch, searchTerm }, ref) => {
    return (
      <>
        <input ref={ref} type="text" placeholder={searchTerm} />
        <button onClick={newSearch}> Search </button>
      </>
    );
  }
);

Внутри основного компонента App Я использую нашу функцию-ловушку useLocalStorage, чтобы получить и установить поиск. Внутри newSearch Я обновляю поисковый термин, вызывая наш хук со значением перенаправленного ввода ref.

export default function App() {
  const ref = React.createRef();

  const [searchTerm, setSearchTerm] = useLocalStorage(
    "search",
    "Not searched yet"
  );

  const newSearch = () => {
    setSearchTerm(ref.current.value);
  };

  return (
    <>
      <SearchAppBar ref={ref} newSearch={newSearch} searchTerm={searchTerm} />
      <p>Last search: {searchTerm}</p>
    </>
  );
}

Надеюсь, это подходящее для вас решение.

Пожалуйста, найдите фрагмент кода здесь: https://codesandbox.io/s/cranky-sunset-8fqtm?file= / src / index. js: 387-773