未定义"状态"，未定义"handleToggle"，未定义 no-undef

Question

Line 11:5:  'state' is not defined         no-undef  
Line 15:5:  'handleToggle' is not defined  no-undef  

我不明白为什么它会向我显示这些错误，请帮助我解决这个问题，我也很感激的解释

const Footer = () => {
state = {
langContent: false
}
handleToggle = (e) => {
e.preventDefault();
this.setState({
langContent: !this.state.langContent
})
}
return (
<FooterContainer>
<span style={{ marginLeft: '15%', fontSize: '1.125rem' }}>
Questions?
<Link> Call 1-877-742-1335</Link>
</span>

{/* Language Button */}
<div className= "lang-btn" onClick={this.handleToggle}>
<Icon icon={iosWorld} size={20}/>
&nbsp;&nbsp;English&nbsp;&nbsp;
<Icon icon={arrowSortedDown} />

</div>
{/* Toggle Language Content */}
{this.state.langContent && (
<div className="lang-toggle">
<ul>
<li>English</li>
</ul>
<ul>
<li>Hindi</li>
</ul>
</div>
)} 
<span style={{ marginLeft: '15%', fontSize: '0.9rem'}}>
Netflix India
</span>
</FooterContainer>
)
}

Answer 1

我认为您混淆了在函数组件中使用state的语法与在类组件中使用states的语法。

要在函数组件中使用state，可以这样使用：(同样，您忘记在函数handleToggle之前声明const，这里您声明的是函数局部变量，因此需要const。您将其与在类中声明方法混淆了(

const Footer = () => {
const [state, setState] = useState({ langContent: false })
const handleToggle = (e: { preventDefault: () => void; }) => {
e.preventDefault();
setState({
langContent: state.langContent
})
}
return (
<FooterContainer>
<span style={{ marginLeft: '15%', fontSize: '1.125rem' }}>
Questions?
<Link> Call 1-877-742-1335</Link>
</span>
{/* Language Button */}
<div className= "lang-btn" onClick={this.handleToggle}>
<Icon icon={iosWorld} size={20}/>
&nbsp;&nbsp;English&nbsp;&nbsp;
<Icon icon={arrowSortedDown} />
</div>
{/* Toggle Language Content */}
{state.langContent && (
<div className="lang-toggle">
<ul>
<li>English</li>
</ul>
<ul>
<li>Hindi</li>
</ul>
</div>
)}
<span style={{ marginLeft: '15%', fontSize: '0.9rem'}}>
Netflix India
</span>
</FooterContainer>
)}

如果你想使用功能组件风格，请在这里阅读更多关于它的信息：React docs使用状态挂钩

Answer 2

该组件已被创建为一个没有状态的功能组件，要解决此问题，可以使用useState挂钩。

const Footer = () => {
const [langContent, setLangContent] = useState(false)
const handleToggle = (e) => {
e.preventDefault();
setLangContent(!langContent);
}
return (
... // Use existing Code
)
}

如果你想继续使用基于类的组件，那么你应该使用一个扩展React.Component的类

class Footer extends React.Component {
constructor(props) {
super(props);
this.state = {
langContent: false
};
}
render() {
... //Use existing Code
}

附加读数：

挂钩状态的React Docs