Javascript TypeError:无法读取属性'；州'；当我将类更改为函数时未定义的

常量Home=（）=>{
React.state={
活动索引：0，
动画：错误，
}
React.setActiveIndex=（i）=>{
this.setState（{activeIndex:i}）；
}
React.setAnimating=（v）=>{
this.setState（{animating:v}）；
}
React.next=（）=>{
如果（this.state.animating）返回；
常数nextIndex=
this.state.activeIndex==items.length-1
? 0
：this.state.activeIndex+1；
这个.setActiveIndex（nextIndex）；
};
React.previous=（）=>{
如果（this.state.animating）返回；
常数nextIndex=
this.state.activeIndex==0
？项目长度-1
：this.state.activeIndex-1；
这个.setActiveIndex（nextIndex）；
};
React.goToIndex=（newIndex）=>{
如果（this.state.animating）返回；
这个.setActiveIndex（newIndex）；
};
React.slides=items.map（（item）=>{
返回(
this.setAnimating（true）}
onExited={（）=>this.setAnimating（false）}
key={item.src}
>
);
});
useffect（（）=>{
Aos.init（{duration:2000}）
}, [])
返回(
{this.slides}
);
}
Home.propTypes={}；
导出默认主页；

我想将这个组件从类更改为函数，然后出现了这个错误。 我还得到了“ReferenceError:状态未定义”和“TypeError:无法读取未定义的属性'state'” 我想从类更改为函数以添加aos动画。 那么我该如何解决这些错误呢。

---

问题主要在于引导滑块的代码。

功能组件中没有此代码。您需要使用

useState

hook重构您的状态

import React, {useState} from 'react';

const [state, setState] = useState({
    activeIndex: 0,
    animating: false,
})

要更改状态，可以这样做

如果需要更改

activeIndex

const setActiveIndex = (i) => {
   setState((prevState) => { ...prevState, activeIndex: i });
}

const setAnimating= (v) => {
    setState((prevState) => { ...prevState, animating: v });
}

如果需要更改

activeIndex

const setActiveIndex = (i) => {
   setState((prevState) => { ...prevState, activeIndex: i });
}

const setAnimating= (v) => {
    setState((prevState) => { ...prevState, animating: v });
}

您应该将

this.state.activeIndex

实例更改为

state.activeIndex

。这同样适用于

动画制作

您还应该从函数引用中删除此。例如： 而不是

this.setActiveIndex(nextIndex);

应该是,

setActiveIndex(nextIndex);

---

希望这有助于进行重构

@Sadeen Alaa，看看这个！！