Я сделал выборочный хук для моих остальных 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 для обновления ПОСЛЕ того, как завершится ловушка с добавлением страны.