reactjs - 在react.js中从api完全获取数据之前加载Skeleton

Question

我想在使用以下代码从react.js中的API完全获取数据之前加载骨架10次，但骨架未加载...

const snippetsdata = snippetsData.data;;
const [snippets, setSnippets] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
    setLoading(true);
    const timer = setTimeout(() => {
        setSnippets(snippetsdata);
    setLoading(false);
    }, 3000);
    return () => clearTimeout(timer);
}, []);
{loading && Array(10).map(()=>{
                                <SnippetsSkeleton />
                            })}

Answer 1

当您使用Array(10)时，实际上您的map函数不会迭代您的数组项，因为Array(10)创建了一个长度为 10 但没有任何元素的数组，因此索引 [0]、[1]、...、[9]未创建。您可以使用 Array.from 而不是 Array(10).map(...) ，像这样:

Array.from({length: 10}, (v,i)=> <SnippetsSkeleton key={i}/>)

或

Array.from(Array(10), (v,i)=> <SnippetsSkeleton key={i}/>)

解决您的问题的另一个解决方案是使用 Array.fill ，像这样:

Array(10).fill(undefined).map((v,i)=> <SnippetsSkeleton key={i}/>);