在 react.js 中从 api 完全获取数据之前加载骨架

Question

I want to Load Skeleton 10 times before data totally fetched from API in react.js with the following code, but the skeleton not loading...

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

When you use Array(10) actually your map function doesn't iterate over your array items because Array(10) creates an array with a length of 10 but without any elements, so the indices [0] , [1] , ..., [9] is not created. Instead of Array(10).map(...) you can use Array.from , like this:

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

or

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

Another solution to solve your is using Array.fill , like this:

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