React JSX 中的循环答案

【问题标题】：Loop in React JSXReact JSX 中的循环
【发布时间】：2020-10-05 23:50:16
【问题描述】：

我不想使用 fileList.map()，而是将它放入 for 循环中，并为每个循环放入 setTimeout(500)。我该怎么做？

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

【问题讨论】：

请问这是什么原因？
我想上传一张图片列表，但我不想同时显示所有图片，而是依次显示
使用visibleItems 的状态并每隔500ms 从fileList 添加项目
你有没有考虑过使用一些动画库来做这样的事情？我还建议使用纯 CSS 转换和过渡组合

标签： javascript reactjs react-native jsx

【解决方案1】：

你可以这样做：

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

【讨论】：

我把它粘贴进去了，但我得到“文件列表已声明但它的值从未使用过”
立即尝试。注意变量ITEMS_TO_ADD_IN_EACH_TIMEOUT 以及它在setVisibleItems 中的使用方式

【解决方案2】：

一种非常简单的方法是创建一个新数组，该数组应包含当前可见的项目。

然后执行一个简单的 setTimeout，它将每 500 毫秒调用一个递归函数，将一个元素添加到可见数组。

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

如果可行，请告诉我！

【讨论】：

我把它粘贴进去了，但我得到了“fileList 已声明但它的值从未使用过”。您的 func 使用 fileList 作为参数，但不要使用。可以改一下吗？
现在试试看，确保你以正确的方式使用它并且fileList是一个数组
但我没有看到您在代码中使用 fileList 的位置？怎么跑？
我在这一行得到了这个Uncaught (in promise) TypeError: Object(...) is not a function const [visibleItems, setVisibleItems] = useState([]);
我认为问题出在 useState([]) 对象上，你能告诉我更多细节吗？