медленная загрузка данных - выборка на карте - PullRequest
Новая
       38

медленная загрузка данных - выборка на карте

1 голос
/ 14 марта 2020

Я написал функцию для загрузки данных, но я думаю, что она работает очень медленно. Он должен скачать список людей и собирать доходы для каждого человека.

  1. Что-то не так здесь?

  2. Является ли функция выборки хорошим местом для сортировки данных?

Данные:

people [{id, name, surname} x 400] incomes [{id,[{ value, date} x 60]]

  const url = "https://example.com/";
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  const [people, setPeople] = useState([]);
  const useMountEffect = fun => useEffect(fun, []);

  function sum(arr) {
    let sum = arr.reduce((a, b) => a + b.value * 1, 0).toFixed(2);
    return sum;
  }

  async function fetchData() {
    let data = [];
    try {
      data = await (await fetch(url)).json();
      await Promise.all(
        data.map(async item => {
          const res = await (await fetch(`${url+item.id}`)).json();
          item.income = sum(res.incomes);
          item.incomes = res.incomes;
          return item;
        })
      );
      data.sort((a, b) => b.income * 1 - a.income * 1);
      setPeoples(data);
    } catch (err) {
      setErrors(err);
    }
  }

  useMountEffect(() => {
    fetchData().then(setLoading(false));
  });

1 Ответ

0 голосов
/ 14 марта 2020

Похоже, вы просто не используете то, что вам возвращает Promise.all (оно не изменяет данные, которые вы ему передаете).

То же самое происходит с функцией sort, но не измените данные, которые вы передаете ему, он просто возвращает новый массив: 

let people = await Promise.all(/* the promises */)
people = poeple.sort((a, b) => b.income * 1 - a.income * 1);
setPeoples(people);

Вероятность снижения производительности связана с тем, что вы выполняете запрос для каждого человека. Хотя это будет работать для нескольких предметов, 400 будет слишком много. Попробуйте отправить данные всех пользователей из вашего бэкэнда, возможно, по маршруту, подобному следующему: 

const url = "https://example.com/people";

А затем сделайте их доступными по отдельности, если это необходимо (для других страниц) 

const url = "https://example.com/people/:id";
...