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

该组件已创建为一个没有状态的功能组件，要解决此问题，您可以使用 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 for hooks-state

Answer 2

我认为您混淆了在功能组件中使用状态的语法和在类组件中使用状态的语法。

要在函数式组件中使用状态，请像这样使用它：（您也忘记在函数 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-Using the state hook

'State' 未定义且 'handleToggle' 未定义 no-undef

2 个答案: