Обновите реагирующий компонент на нагрузку с помощью useEffect при успешном получении - PullRequest
Новая
       32

Обновите реагирующий компонент на нагрузку с помощью useEffect при успешном получении

0 голосов
/ 07 января 2020

Я хотел бы отобразить функциональный компонент реакции и обновить его, как только компонент завершит итерацию успешных выборок, создав окончательный массив, который будет использоваться для визуализации компонента. Я использую API выборки и реагирую на хуки (useEffect, useState). Рендеринг и обновление должны выполняться немедленно (при загрузке страницы).

В моей текущей версии компонент обновляется только после обновления родительского компонента (родительский компонент обновляется каждые 15 секунд). Нет ошибок, и выборка всегда успешна.

Я пытался использовать ловушку useEffect с массивом зависимостей и без него, устанавливая состояние (useState) в различных точках обещания выборки, без успеха

Это мой текущий код: 

function Info({ description, routes, type }) {
  const { t } = useTranslation();
  const [routeData, setRoutes] = useState([]);
  useEffect(() => {
    const routeArray = [];
    routes.forEach(async r => {
      fetch(
        url,
        {
          method: 'GET',
          credentials: 'include',
          headers: new Headers({
            Authorization: `Basic ${btoa(`${credentials}`)}`,
            'Content-Type': 'application/json',
          }),
        },
      )
        .then(res => {
          if (!res.ok) {
            throw res;
          }
          return res.json();
        })
        .catch(() => console.error('Failed to fetch route data'))
        .then(data => {
          routeArray.push(data);
        });
    });
    setRoutes(routeArray);
  }, [...routeData]);

  return (
    <div className="info-container">
      <div className="info-container-header">
        <span>
          <InfoIcon />
          <h1>{t('Informationen')}</h1>
        </span>
      </div>
      <div className={`info-container-body${type === 'final' ? ' final' : ''}`}>
        {routes.length !== 0 && type !== 'final' ? (
          <ul>
            {routeData.map((i, index) => {
              // eslint-disable-next-line react/no-array-index-key
              return <li key={index}>{i.id}</li>;
            })}
          </ul>
        ) : (
          <div>{description}</div>
        )}
      </div>
    </div>
  );
}

У кого-нибудь есть подсказка о том, что я делаю неправильно?

Действительно признателен за любую помощь

Дан

...