L oop в React JSX - PullRequest
Новая
       19

L oop в React JSX

1 голос
/ 16 июня 2020

Вместо использования fileList.map () я хочу вставить его для l oop и setTimeout (500) для каждого l oop. Как мне это сделать ? 

 const SortableList = SortableContainer(({ fileList }) => (
      <div>
        {
        fileList.map((file, index) => (
          <SortableItem key={`item-${index}`} index={index} value={file} />
        ))
        }
      </div>
    ))

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Очень простой способ - создать новый массив, который должен содержать элементы, которые в настоящее время видимы.

Затем выполните простой setTimeout, который будет вызывать рекурсивную функцию каждые 500 мс, которая добавит один элемент к видимому array. 

 const SortableList = SortableContainer(({ fileList }) => {
  const [visibleItems, setVisibleItems] = useState([]);
  useEffect(() => {
    function displayNext(next) {
      setVisibleItems(prevItems => [...prevItems, fileList[next]]);
      if (++next < fileList.length) {
        setTimeout(() => {
          displayNext(next);
        }, 500);
      }
    }

    displayNext(0);
  }, []);

  return (
     <div>
        {
           visibleItems.map((file, index) => (
             <SortableItem key={`item-${index}`} index={index} value={file} />
           ))
        }
     </div>
  )});

Сообщите мне, если работает!

0 голосов
/ 16 июня 2020

Можно сделать примерно так: 

import React, {useState, useEffect} from 'react';

const ITEMS_TO_ADD_IN_EACH_TIMEOUT = 50

const SortableList = SortableContainer(({ fileList }) => {
   const [visibleItems, setVisibleItems] = useState([])

   useEffect(() => {
      const timer = setTimeout(() => {
          setVisibleItems([fileList.slice(0, visibleItems.length + ITEMS_TO_ADD_IN_EACH_TIMEOUT)])
      }, 500);

      return () => clearTimeout(timer);
   })

   return (
      <div>
         {
            visibleItems.map((file, index) => (
              <SortableItem key={`item-${index}`} index={index} value={file} />
            ))
         }
      </div>
   ))
}
...