嗨，我是 React 的新手，我正在制作一个 meme 生成器。我试图将它从类转换为 React Hooks，不确定为什么它不起作用。这是我目前所拥有的，当我尝试生成新图像时，我收到错误。

import React, { useEffect, useState } from "react"

function MemeGenerator() {

const [newText, setNewText] = useState({
    topText: "",
    lastName: ""
})
const [randomImg, setrandomImg] = useState("http://i.imgflip.com/1bij.jpg")
const [allMemeImgs, setallMemeImages] = useState([])

useEffect(()=> {
    fetch("https://api.imgflip.com/get_memes")
        .then(response => response.json())
        .then(response => {
            const {memes} = response.data
            setallMemeImages({allMemeImgs: memes})
        })
},[])

function handleChange(event) {
    const {name, value} = event.target

    setNewText({
        ...newText,
        [name]: value
    })
}
// error is on this function I believe
function handleSubmit(event) {
    event.preventDefault()
    const randNum = Math.floor(Math.random() * allMemeImgs.length)
    alert(randNum)
    const randMemeImg = allMemeImgs[randNum].url
    setrandomImg(randMemeImg)
}

return (
    <div>
        <form className="meme-form" onSubmit={handleSubmit}>
            <input
                type="text"
                name="topText"
                placeholder="Top Text"
                value={newText.topText}
                onChange={handleChange}
            />
            <input
                type="text"
                name="bottomText"
                placeholder="Bottom Text"
                value={newText.bottomText}
                onChange={handleChange}
            />

            <button>Gen</button>
        </form>
        <div className="meme">
            <img src={randomImg} alt="" />
            <h2 className="top">{newText.topText}</h2>
            <h2 className="bottom">{newText.bottomText}</h2>
        </div>
    </div>
 )
}

我之前所拥有的有效的方法是：

import React, {Component} from "react"

class MemeGenerator extends Component {
    constructor() {
        super()
        this.state = {
            topText: "",
            bottomText: "",
            randomImg: "http://i.imgflip.com/1bij.jpg",
            allMemeImgs: []
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    
componentDidMount() {
    fetch("https://api.imgflip.com/get_memes")
        .then(response => response.json())
        .then(response => {
            const {memes} = response.data
            this.setState({ allMemeImgs: memes })
        })
}

handleChange(event) {
    const {name, value} = event.target
    this.setState({ [name]: value })
}

handleSubmit(event) { 
    event.preventDefault()
    const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)
    const randMemeImg = this.state.allMemeImgs[randNum].url
    this.setState({ randomImg: randMemeImg })
}

render() {
    return (
        <div>
            <form className="meme-form" onSubmit={this.handleSubmit}>
                <input 
                    type="text"
                    name="topText"
                    placeholder="Top Text"
                    value={this.state.topText}
                    onChange={this.handleChange}
                /> 
                <input 
                    type="text"
                    name="bottomText"
                    placeholder="Bottom Text"
                    value={this.state.bottomText}
                    onChange={this.handleChange}
                /> 
            
                <button>Gen</button>
            </form>
            <div className="meme">
                <img src={this.state.randomImg} alt="" />
                <h2 className="top">{this.state.topText}</h2>
                <h2 className="bottom">{this.state.bottomText}</h2>
            </div>
        </div>
    )
}

错误内容： TypeError：未定义不是对象（评估“allMemeImgs[randNum].url”）