#reactjs #react-hooks #state #use-effect
#reactjs #реагирующие хуки #состояние #использование-эффект
Вопрос:
Я новичок в react, и мне нужно обновлять обновление переменной состояния в функции при каждом отображении функции. Эта переменная используется в качестве опоры для компонента.
Код,
function Cal(props) {
const [allEvents, setEvents] = useState({ events: [] });
const [currentYear, setCurrentYear] =useState(moment().year().toString());
useEffect(() => {
getEvents();
}, [currentYear]);
async function getEvents() {
const yearStart = `${currentYear}-01-01`;
const yearEnd = `${currentYear}-12-31`;
const data = await fetchEvents(yearStart, yearEnd, 'Discount', currentLang);
console.log('data:', data);
setEvents(data);
console.log('allEvents:', allEvents);
}
return (
<ChildComp
eventData={allEvents}
/>
);
}
Обновить:
Мне нужно, чтобы функция getEvents вызывалась каждый раз, когда изменяется значение текущего года.Когда я регистрирую значение данных в консоли, я вижу данные ответа. Но когда я консольную запись журнала, я всегда вижу пустой массив. Я не вижу значения обновленных данных.
?
Любая помощь будет оценена.
Спасибо
Комментарии:
1. спасибо @NicholasTower Мне нужно получать разные наборы событий каждый раз, когда изменяется значение текущего года. Следовательно, я вызываю сервер в useeffect и передаю значения AllEvents дочернему компоненту, который отображает эти события. Если у меня нет значения AllEvents в состоянии, значение не обновляется
2. @NicholasTowe обновил вопрос
Ответ №1:
Вызовите функцию вне useEffect.
function Cal(props) {
const [allEvents, setEvents] = useState({ events: [] });
async function getEvents() {
const yearStart = `${currentYear}-01-01`;
const yearEnd = `${currentYear}-12-31`;
const data = await fetchEvents(yearStart, yearEnd, 'Hard Discount', currentLang);
console.log('data:', data);
setEvents(data);
console.log('allEvents:', allEvents);
}
useEffect(() => {
getEvents();
}, [allEvents]);
return (
<ChildComp
eventData={allEvents}
/>
);
}
Например ;
useEffect(() => {
getCountries();
}, []);
const getCountries = async () => {
const response = await fetch("https://covid19.mathdro.id/api/countries");
const data = await response.json();
const arrayOfCountry = data.countries;
setCountries(arrayOfCountry);
setLoading(false);
};
Ответ №2:
Если я правильно понял, вам нужно только извлечь асинхронные данные после первого отображения компонента, поэтому измените перехват useEffect на пустой массив, и он вызовет перехват для почти эквивалентного «componentDidMount ()»
function Cal(props) {
const [allEvents, setEvents] = useState({ events: [] });
useEffect(() => {
async function getEvents() {
const yearStart = `${currentYear}-01-01`;
const yearEnd = `${currentYear}-12-31`;
const data = await fetchEvents(yearStart, yearEnd, 'Hard Discount', currentLang);
console.log('data:', data);
setEvents(data);
console.log('allEvents:', allEvents);
}
getEvents();
}, []);
return (
<ChildComp
eventData={allEvents}
/>
);
}
Комментарии:
1. Мне нужно получать события каждый раз, когда обновляется значение текущего года
2. Отлично, что теперь меняет текущий год? Это та часть, которая все еще не имеет смысла для меня. Текущий год изменится только 31 декабря : D
3. Существует кнопка, которая используется для перехода к предыдущему и следующему году
4. Отлично, теперь это начинает иметь смысл. Если бы я был на вашем месте при отладке, моим следующим шагом была бы проверка, имеет ли состояние currentYear ожидаемый формат ввода в каждом сценарии (исходящий из (moment().year().toString()) и исходящий от вашей кнопки. )
5. Итак, следующий шаг — поместить что-то вроде предупреждения в последнюю строку вашей функции getEvents. Попробуйте создать предупреждение с помощью некоторого интуитивно понятного текста, например alert(JSON.stringify(data))); И проверьте, появляется ли предупреждение каждый раз, когда вы меняете дату.
Ответ №3:
согласно вашему коду, useEffect имеет зависимость [AllEvents] , что означает, что при каждом изменении AllEvents будет вызываться getEvents(),
Я считаю, что вам просто нужно это при первом монтировании компонента, поэтому просто удалите зависимость
useEffect(() => {
getEvents();
}, [allEvents]);