reactjs - 在 fetch .then 块上填充一个空数组

Question

我试图在 fetch 请求上填充一个数组 12 次。我究竟做错了什么？我正在使用 giphy API。这是我的代码：

function App() {
    const [loaded, setLoaded] = useState(false);
    const [gif, setGif] = useState("");
    const [gifArray, setGifArray] = useState([]);
    let dataArray = [];
    useEffect(() => { 
        let array = [1, 2, 3, 4, 4, 5, 5, 8, 9, 1, 1, 1];
        let arrayOfGifs = 
        array.map(() => axios.get("https://api.giphy.com/v1/gifs/random?api_key=IIajCrRKVlvwRVKRLcnqul92v3ePFaY1&tag=&rating=g")
        .then((res) => { 
            setGif(res.data.data);
            dataArray.push(res.data.data);
        });
        setGifArray(arrayOfGifs);
    }, []);

console.log(dataArray);

return (
<ul>
    {gifArray.map((el) => <li key={el.id}>{el.id}</li>)}
</ul>
)