Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Senior
6
Обнаружить и исправить дефекты в React‑компоненте
Условие задачи
Найдите и устраните ошибки в приведённом ниже фрагменте кода. Обратите внимание на работу с состоянием, обработку событий и работу с массивом данных.
import React, { useState, useEffect } from "react";
function getRandomInt(min, max) {
let rand = min + Math.random() * (max - min);
return Math.round(rand);
}
// имитация запроса к серверу – возвращаем число асинхронно
const fetchRandomNumber = () => Promise.resolve(getRandomInt(9000, 11000));
const dataList = [];
export const randomList = () => {
const [count, setCount] = useState(0);
const [scrollPos, setScrollPos] = useState(0);
useEffect(() => {
const loadData = async () => {
setCount(await fetchRandomNumber());
const onScroll = () => setScrollPos(window.scrollY);
window.addEventListener("scroll", onScroll);
for (let i = 0; i < count; i++) {
dataList.push(getRandomInt(0, 20));
}
};
loadData();
return () => {
const onScroll = () => setScrollPos(window.scrollY);
window.removeEventListener("scroll", onScroll);
};
}, []);
return (
<div>
<div>Количество справочников: {count}</div>
<div>Scroll: {scrollPos}</div>
<div>Список полученных значений</div>
<div style={{ height: 400, overflowY: "hidden" }}>
{dataList.map((el, index) => (
<div key={index}>
<div>Справочник {index}</div>
<div>{el}</div>
</div>
))}
</div>
</div>
);
};