reactJS - 无效的钩子调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：reactJS - Invalid hook call. Hooks can only be called inside of the body of a function componentreactJS - 无效的钩子调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2021-07-21 14:29:08
【问题描述】：

我对 reactJS 还很陌生，我正在尝试像这样使用引导模式：

class Footer extends Component {

  render() { 

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return ( 

    <footer className="footer-bottom">
      <Container>
           <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
              Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
              Save Changes
          </Button>
          </Modal.Footer>
      </Modal>
      </Container> 
     </footer>
  );
  }
}

但是我收到了这个错误：

Invalid hook call. Hooks can only be called inside of the body of a function component.

我的问题是如何将我的 const (show、setShow、handelClose、handelShow) 变成一个函数来让它工作？

【问题讨论】：

标签： reactjs twitter-bootstrap

【解决方案1】：

Hooks 只能用在函数组件中，所以你的组件不能扩展 React.Component。而不是这个：

class Footer extends Component {

这样做：

Footer = (props) => {

   //rest of the code 

}

因为您现在没有扩展 Component 类，所以您不需要 render() 函数。只需从 Footer 函数返回即可。

【讨论】：

【解决方案2】：

问题是您现在正在制作的组件是类组件，而不是函数组件。截至目前，hooks don't work inside classes。尝试将您的代码更改为：

export default function Footer() {


    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return ( 

    <footer className="footer-bottom">
      <Container>
           <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
              Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
              Save Changes
          </Button>
          </Modal.Footer>
      </Modal>
      </Container> 
     </footer>
  );
  
}

【讨论】：

新错误：解析错误：意外令牌，预期“（”在此：导出默认函数页脚{
将第一行改为：export default function Footer(props) {
对不起，我忘了加括号
新错误：解析错误：每个模块只允许一个默认导出。在这一行 export default connect(mapStateToProps, mapDispatchToProps, )(withTranslation('common')(Footer))
您只能在一项上使用默认导出，在这种情况下它是功能。您必须删除您提到的其他道具的默认导出。

【解决方案3】：

类组件中不能使用Hooks，可以转成函数式组件：

const Footer = () => {
    return (
         ...
    )
}

您也可以将其保留为类组件：

class Footer extends Component {
    constructor(props){
        super(props)
        this.state = {
             show: false
        }
    }
}

【讨论】：

【解决方案4】：

以下是创建函数的方法：

//add your imports
import { useState } from 'react';

//pass props if you're using prop drilling
function Footer(props) {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <footer className="footer-bottom">
            <Container>
                <Modal show={show} onHide={handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>
                        <Button variant="primary" onClick={handleClose}>
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>
            </Container>
        </footer>
    );
}

//export the function
export default Footer;

【讨论】：