Как освежиться с помощью крючка API для отдыха с ReactJS - PullRequest
Новая
       44

Как освежиться с помощью крючка API для отдыха с ReactJS

0 голосов
/ 19 сентября 2019

Я сделал выборочный хук для моих остальных API в ReactJS.У меня два компонента.

1) список стран

2) добавление страны

После добавления компонентом (2) страны, которую я хочу сообщить компоненту (1)) перезагрузить данные.Я использую useEffect для компонента 1 для извлечения данных.

Я попытался вызвать булево обновление для реквизита.Обновление сработает, но оно будет быстрым.Перед тем, как новые данные появятся в базе данных, произошло обновление, поэтому я не получаю новые данные.

Country.js 

function Countries() {
  const [addCountryVisible, setAddCountryVisible] = useState(false);
  const countriesApi = useFetch("country/getall");

  useEffect(() => {
    getCountries();
  }, []);

  function getCountries() {
    countriesApi.run();
  }
return ...
}

AddCountry.js 

function AddCountry(props) {
  const [country, setCountry] = useState({
    name: "",
    flag: ""
  });

  const addCountryApi = useFetch("country/add", "POST");

  const active = props.visible ? "is-active" : null;

  const handleSubmit = evt => {
    evt.preventDefault();

    addCountryApi.run(country, props.setDone);
  };
return ...
}

useFetch.js 

import { useState } from "react";
import { useAuth0 } from "./react-auth0-wrapper";

const useFetch = (url, method = "GET") => {
  const { loading, getTokenSilently } = useAuth0();
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState();
  const [error, setError] = useState();

  const run = async data => {
    if (!loading && getTokenSilently) {
      setError();
      setIsLoading(true);
      try {
        const token = await getTokenSilently();
        const options = {
          method,
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`
          },
          body: JSON.stringify(data)
        };
        const response = await fetch("/api/" + url, options);
        const json = await response.json();
        setData(json);
      } catch (e) {
        setError(e.message);
      }
      setIsLoading(false);
    }
  };

  return { data, error, isLoading, run };
};

export default useFetch;

Я ожидаю обновить данные из useEffect для обновления ПОСЛЕ того, как завершится ловушка с добавлением страны.

...