Назад к задачам
Junior — Senior
6

Обнаружить и исправить дефекты в React‑компоненте

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Найдите и устраните ошибки в приведённом ниже фрагменте кода. Обратите внимание на работу с состоянием, обработку событий и работу с массивом данных.

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>
  );
};