Reactstrap项目报state、openModal未定义no-undef错误如何解决？

你当前编写的是React函数组件，却使用了仅类组件支持的语法，触发了语法规则校验报错：

• 函数组件没有组件实例this指向，所有this.xxx的调用都无效
• 函数组件不能直接声明state变量、调用this.setState更新状态，需要使用Hook实现状态管理
• 你定义的组件名Table和从reactstrap导入的Table组件重名，后续也会触发命名冲突错误
• reactstrap的Modal组件控制显隐的属性为isOpen，你写的show属性不生效，后续即便解决语法报错也无法正常弹出弹窗

修正后的完整代码如下：

import React, { useState } from "react";
import {
    Modal,
    Button,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    CardFooter,
    Table,
    Row,
    ButtonGroup,
    Col,
  } from "reactstrap";

// 组件名修改，避免和导入的Table组件重名
function TablePage() {
  // 使用useState Hook声明状态
  const [isOpen, setIsOpen] = useState(false);
  // 定义弹窗开关方法
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
      <>
        <div className="contentGroup">
          <Row>
            <Col md="12">
              <Card>
                    <CardHeader>
                    <ButtonGroup style={{float: 'right'}}>
                        {/* 调用方法不需要加this */}
                        <Button className="btn-round btn-icon" color="blue" onClick={openModal} style={{float: 'right'}}>
                            <i className="icon-plus-add"/>
                        </Button>
                    </ButtonGroup>
                   </CardHeader>
                       {/* 原有其他代码保持不变 */}
             </Card>
             {/* 显隐属性改为isOpen，方法调用不加this */}
             <Modal isOpen={isOpen} onHide={closeModal}>
              <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Modal text</Modal.Body>
              <Modal.Footer>
              <Button color="info" onClick={closeModal}>
                Close
              </Button>
              </Modal.Footer>
              </Modal>
          </Col>
        </Row>
     </div>
    </>
   );
  }

export default TablePage;

如果你更习惯类组件的写法，也可以修改为如下代码：

import React from "react";
import {
    Modal,
    Button,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    CardFooter,
    Table,
    Row,
    ButtonGroup,
    Col,
  } from "reactstrap";

class TablePage extends React.Component {
  state = {
    isOpen: false
  };
  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  render() {
    return (
      <>
        <div className="contentGroup">
          <Row>
            <Col md="12">
              <Card>
                    <CardHeader>
                    <ButtonGroup style={{float: 'right'}}>
                        <Button className="btn-round btn-icon" color="blue" onClick={this.openModal} style={{float: 'right'}}>
                            <i className="icon-plus-add"/>
                        </Button>
                    </ButtonGroup>
                   </CardHeader>
                       ...
             </Card>
             <Modal isOpen={this.state.isOpen} onHide={this.closeModal}>
              <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
              </Modal.Header>
              <Modal.Body>Modal text</Modal.Body>
              <Modal.Footer>
              <Button color="info" onClick={this.closeModal}>
                Close
              </Button>
              </Modal.Footer>
              </Modal>
          </Col>
        </Row>
     </div>
    </>
    )
  }
}

export default TablePage;

内容的提问来源于stack exchange，提问作者noobcode0000