Я пытаюсь получить некоторые данные из API, но не имеет значения, какие зависимости я использую, useEffect все еще продолжает делать бесконечный цикл, что-то не так в коде или почему он продолжает это делать?
function HomePage() {
const [Carousels, setCarousels] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const getCarousels = async () => {
setLoading(true);
const genres = ["BestRated", "Newest"];
for (const genre of genres) {
try {
const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
console.info(res.data);
setCarousels([...Carousels, res.data]);
} catch (err) {
console.info(err);
}
}
setLoading(false);
}
getCarousels();
}, [Carousels]);
return (
<div className='Home'>
<NavBar />
<HeroCard />
{!loading && Carousels.map((carousel) => (
<Carousel key = {carousel._id} carousel = {carousel} />
))}
<Footer />
</div>
);
}
useEffect
в вашем коде обновляются карусели при каждом запуске. Он видит обновленное значение и снова запускается. Вы можете исправить это разными способами, проще всего добавить [fetched, setFetched] = useState(false); и используйте его в своем useEffect для проверки перед получением из API
Эффект использования вызывается при изменении каруселей и изменении каруселей внутри useEffect.
Использовать заданное состояние с обратным вызовом
function HomePage() {
const [Carousels, setCarousels] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const getCarousels = async () => {
setLoading(true);
const genres = ["BestRated", "Newest"];
for (const genre of genres) {
try {
const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
console.info(res.data);
setCarousels(carouselsPrev => [...carouselsPrev, res.data]);
} catch (err) {
console.info(err);
}
}
setLoading(false);
}
getCarousels();
}, []);
return (
<div className='Home'>
<NavBar />
<HeroCard />
{!loading && Carousels.map((carousel) => (
<Carousel key = {carousel._id} carousel = {carousel} />
))}
<Footer />
</div>
);
}
@TrifIonut Можете ли вы записать вывод разрешения?
Да, рес работает нормально, но в Каруселях он почему-то не добавляется
@TrifIonut Можете ли вы показать мне вывод console.info(res)
Это показано из журнала (res.data) Array(1) 0: {_id: '627d6e54f1a6fc3a220b9ffa', title: 'Лучшие рейтинговые фильмы', жанр: 'BestRated', содержание: Array(10), createdAt: '2022-05 -12T20:30:12.978Z', …} длина: 1 [[Прототип]]: Массив(0)
А это из карусели: Array(0)length: 0[[Prototype]]: Array(0)
Я изменил setCarousels, и это остановило бесконечный цикл, но я не знаю почему, карусели не обновляются должным образом, он не получает ответ от res.data