Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
6
Обнаружить и исправить баги в React‑компоненте
Условие задачи
Найдите и устраните ошибки в представленном ниже React‑компоненте, который использует хуки useState и useEffect. Обратите внимание на корректность работы асинхронного эффекта и правильное управление событиями прокрутки окна.
import React, { useState, useEffect } from "react";
// Имитация запроса к серверу
const fetchCall = () => Promise.resolve(Math.random());
const NumberAndScrollX = () => {
const [number, setNumber] = useState(0);
const [scroll, setScroll] = useState(0);
useEffect(async () => {
setNumber(await fetchCall());
}, []); // Пустой массив зависимостей для выполнения эффекта только при монтировании
useEffect(() => {
const handleScroll = () => setScroll(window.scrollY);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []); // Очистка эффекта при размонтировании
return (
<div>
<div>Number: {number}</div>
<div>ScrollY: {scroll}</div>
</div>
);
};
export default NumberAndScrollX;