Reactjs 将React类组件转换为React钩子

嗨，我是新来的反应者，我正在做一个模因发生器。我试图将它从一个类转换为react钩子，但不确定为什么它不工作。这就是我到目前为止所做的，当我尝试生成一个新图像时，我得到了一个错误

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，{useffect，useState}来自“React”
函数MemeGenerator（）{
常量[newText，setNewText]=useState({
topText:“”，
姓氏：“
})
常量[randomImg，setrandomImg]=useState（“http://i.imgflip.com/1bij.jpg")
const[allMemeImgs，setallMemeImages]=useState（[]
useffect（（）=>{
取回（“https://api.imgflip.com/get_memes")
.then（response=>response.json（））
。然后（响应=>{
const{memes}=response.data
setallMemeImages（{allMemeImgs:memes}）
})
},[])
函数句柄更改（事件）{
常量{name，value}=event.target
设置新文本({
…新文本，
[名称]：值
})
}
//我相信这个函数有错误
函数handleSubmit（事件）{
event.preventDefault（）
const randNum=Math.floor（Math.random（）*allMemeImgs.length）
警报（随机数）
const randMemeImg=allMemeImgs[randNum].url
setrandomImg（randMemeImg）
}
返回(
消息
{newText.topText}
{newText.bottomText}
)
}

我以前工作过的是：

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

import React，{Component}来自“React”
类MemeGenerator扩展组件{
构造函数（）{
超级（）
此.state={
topText:“”，
底部文本：“”，
随机数：http://i.imgflip.com/1bij.jpg",
所有成员：[]
}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
componentDidMount（）{
取回（“https://api.imgflip.com/get_memes")
.then（response=>response.json（））
。然后（响应=>{
const{memes}=response.data
this.setState（{allMemeImgs:memes}）
})
}
手变（活动）{
常量{name，value}=event.target
this.setState（{[name]：value}）
}
handleSubmit（事件）{
event.preventDefault（）
const randNum=Math.floor（Math.random（）*this.state.allMemeImgs.length）
const randMemeImg=this.state.allMemeImgs[randNum].url
this.setState（{randomImg:randMemeImg}）
}
render（）{
返回(
消息
{this.state.topText}
{this.state.bottomText}
)
}

错误显示：

---

TypeError:undefined不是对象（计算'allMemeImgs[randNum].url'）

您希望为allMemeImgs状态初始化数组

const [allMemeImgs, setallMemeImages] = useState([])

但已将其配置为此特定useffecthook中的对象

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

在线发布：

setallMemeImages({allMemeImgs: memes})

建议将此行更改为：

 setallMemeImages([...memes]);

allMemeImgs

是本地状态的数组。但是这里

setallMemeImages（{allMemeImgs:memes}）

将其设置为对象

---

将其更改为

setallMemeImages（（prev）=>[…prev，memes]）

注意您也可以使用

setallMemeImages（[…memes]）；

但是如果出现类型错误，请使用

setallMemeImages（memes）；

，如果您得到

randMemeImg

的类型从不出错，请使用：

const randMemeImg = allMemeImgs[randNum];
setrandomImg(Object(randMemeImg).url);

函数MemeGenerator（）{
常量[newText，setNewText]=React.useState({
topText:“”，
正文：“”
})
常量[randomImg，setrandomImg]=React.useState（“http://i.imgflip.com/1bij.jpg")
const[allMemeImgs，setallMemeImages]=React.useState（[]
React.useffect（（）=>{
取回（“https://api.imgflip.com/get_memes")
.then（response=>response.json（））
。然后（响应=>{
const{memes}=response.data
setallMemeImages（[…memes]）；
})
},[])
函数句柄更改（事件）{
常量{name，value}=event.target
设置新文本({
…新文本，
[名称]：值
})
}
函数handleSubmit（事件）{
event.preventDefault（）
const randNum=Math.floor（Math.random（）*allMemeImgs.length）
警报（随机数）
const randMemeImg=allMemeImgs[randNum].url
setrandomImg（randMemeImg）
}
返回(
消息
{newText.topText}
{newText.bottomText}
)
}
ReactDOM.render（，document.querySelector（“#app”）；

setallMemeImages（{allMemeImgs:memes}）

应该是

setallMemeImages（memes）

它应该是setallMemeImages（memes）；

const randMemeImg = allMemeImgs[randNum];
setrandomImg(Object(randMemeImg).url);