Сохраняйте данные с помощью localStorage - React. js - PullRequest
Новая
       26

Сохраняйте данные с помощью localStorage - React. js

0 голосов
/ 03 августа 2020

Я не понимаю, как использовать localStorage для сохранения данных, поступающих от вызова API. Я хочу, чтобы всякий раз, когда я обновляю sh страницу, callApi внутри useEffect, чтобы не отображать новые данные и сохранять существующие данные без изменений.

Любая помощь будет принята с благодарностью. 

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Layout, Loading, OverviewHeader, OverviewSubHeader, SiteCard } from '../components';

const Overview = () => {
    const [loading, setLoading] = useState(true);
    const [sites, setSites] = useState([]);

    useEffect(() => {
        async function callApi() {
            const response = await axios.get(`https://randomuser.me/api/?results=3`);
            const sites = response?.data?.results;
            console.log('sites', sites);
            setSites(sites);

            await localStorage.setItem('sites', JSON.stringify(sites));
            setLoading(false);
        }
        callApi();
    }, []); 

    return (
        <div>
            <Layout>
                <OverviewHeader />
                <OverviewSubHeader />
                <div className='overview-page-wrapper'>
                    {loading ? (
                        <Loading />
                    ) : (
                        sites.map(site => {
                            return (
                                <React.Fragment>
                                    <SiteCard
                                        key={site.login.uuid}
                                        siteId={site.login.uuid}
                                        image={site.picture.large}
                                        firstName={site.name.first}
                                        lastName={site.name.last}
                                        city={site.location.city}
                                        country={site.location.country}
                                        sensors={site.dob.age}
                                        notifications={site.registered.age}
                                        latitude={site.location.coordinates.latitude}
                                        longitude={site.location.coordinates.longitude}
                                        {...site}
                                    />
                                </React.Fragment>
                            );
                        })
                    )}
                </div>
            </Layout>
        </div>
    );
};

export default Overview;

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Я не совсем уверен, что вы пытаетесь достичь sh, поскольку вы, вероятно, захотите обновить sh эти данные в какой-то момент. Может быть, вы могли бы указать, какое поведение / сценарий вы пытаетесь удовлетворить?

В любом случае, чтобы ответить на ваш вопрос, вы могли бы сделать что-то вроде: 

const [displayedSites, setDisplayedSites] = useState([])

// this does both setting the state for your UI 
// and stores to localStorage
const setAndSaveDisplayedSites = (fetchedSites) => {
  setDisplayedSites(sites)
  localStorage.setItem('sites', JSON.stringify(sites))
}

useEffect(() => {
  (async function () {
    const localSites = localStorage.getItem(sites);
    if (!localSites) {
      // this will only ever fetch if it is your first time mounting this component
      // I suppose you would need to call setAndSaveDisplayedSites
      // from a "refresh" button
      const fetchedSites = await getSitesFromAPI()
      setAndSaveDisplayedSites(fetchedSites)
      return
    }
    const parsedLocalSites = JSON.parse(localSites)
    setDisplayedSites(parsedLocalSites)
  })()
}, [])

также проверить этот хук, который позаботится о некоторых вещах за вас: https://usehooks.com/useLocalStorage/

0 голосов
/ 03 августа 2020

Используйте для этой цели ловушку useContext ИЛИ, если вы действительно просто хотите использовать локальное хранилище, тогда используйте его, но управляйте разными состояниями / переменными для этого.

  1. Ваше текущее состояние (которое вы хотите отобразить на экране)
  2. Выбранные вами данные (те, которые вы хотите сохранить)

Надеюсь, это имеет смысл. Спасибо!

...