Как обрабатывать localstorage с результатом вызова внешнего API в ReactJS? - PullRequest
Новая
       5

Как обрабатывать localstorage с результатом вызова внешнего API в ReactJS?

0 голосов
/ 09 июля 2020

Основное золото - сделать поисковую панель из внешнего API. Я использую Context API, чтобы предоставить глобальное состояние, и настраиваемый обработчик asyn c для вызова pokeapi, который я сейчас доступен, для хранения данных, найденных в localstorage, но дело в том, что я храню это данные из состояния, которое изменяется в событии, поэтому, когда я перезагружаю страницу, состояние не определено и устанавливает значение локального хранилища на undefined ... есть лучший подход для решения этой проблемы?

context: 

import React,{createContext, useEffect} from 'react'
import { usePokemonReducer } from './PokemonReducer'
import {FIND_POKEMON} from './Actions'
export const PokemonContext = createContext()

const PokemonProvider = ({children}) => {
    
    const [state, dispatch] = usePokemonReducer(()=>{
        const localData = localStorage.getItem('pokemons');
        return localData ? JSON.parse(localData) : [];
    });

    const { pokemon } = state;

    const findPokemon = (pokemon) => dispatch({ type: FIND_POKEMON, pokemon})

    useEffect(() => {
        localStorage.setItem('pokemons', JSON.stringify(pokemon.pokemon));
    }, [pokemon]);

    const providerValues = {
        pokemon,
        findPokemon,
    }

    return (
        <PokemonContext.Provider value={providerValues}>
            {children}
        </PokemonContext.Provider>
    )
}

export default  PokemonProvider;

customAsyncHook: 

import {useEffect, useState, useContext} from 'react'
import { PokemonContext } from '../../Services/Store/PokemonContext'
import {FIND_POKEMON} from '../../Services/Store/Actions'
import axios from 'axios'

const useAsyncHook = (id) => {

    const [result, setResult] = useState();

    const [loading, setLoading] = useState('false');

    const { findPokemon } = useContext(PokemonContext)

     useEffect(() => {

      async function getPokemon() {

        try {

          setLoading('true');

          const response = await axios(
            `https://pokeapi.co/api/v2/pokemon/${id}`
          );

          setResult(response.data);

          findPokemon({type:FIND_POKEMON, pokemon:response.data });

        } catch (error) {

          setLoading('null');

          findPokemon({type:FIND_POKEMON, pokemon:null });

        }

      }
  
      if (id !== "") {

        getPokemon();

      }

    }, [id]);
  
    return [result, loading];

  }

  export default useAsyncHook

1 Ответ

1 голос
/ 09 июля 2020

Вы можете просто использовать условие if. если pokemon не определен, вам не нужно устанавливать для элемента значение localStorage. 

useEffect(() => {
    if (pokemon.pokemon !== undefined) {
        localStorage.setItem('pokemons', JSON.stringify(pokemon.pokemon));
    }
}, [pokemon]);
...