refactor: 使用hooks重构Dashboard组件

Author: NLRX-WJC

src/views/dashboard/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { Row, Col } from "antd";
 import "./index.less";
 import PanelGroup from "./components/PanelGroup";
@@ -9,7 +9,7 @@ import PieChart from "./components/PieChart";
 import TransactionTable from "./components/TransactionTable";
 import BoxCard from "./components/BoxCard";
 
-const lineChartData = {
+const lineChartDefaultData = {
   "New Visits": {
     expectedData: [100, 120, 161, 134, 105, 160, 165],
     actualData: [120, 82, 91, 154, 162, 140, 145],
@@ -27,77 +27,77 @@ const lineChartData = {
     actualData: [120, 82, 91, 154, 162, 140, 130],
   },
 };
-class Home extends Component {
-  state = {
-    lineChartData: lineChartData["New Visits"],
-  };
 
-  handleSetLineChartData = (type) => {
-    this.setState({ lineChartData: lineChartData[type] });
-  };
-  render() {
-    return (
-      <div className="app-container">
-        <a
-          href="https://github.com/NLRX-WJC/react-antd-admin-template"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="github-corner"
-        > </a>
-        <PanelGroup handleSetLineChartData={this.handleSetLineChartData} />
+const Dashboard = () => {
+  const [lineChartData, setLineChartData] = useState(
+    lineChartDefaultData["New Visits"]
+  );
 
-        <LineChart
-          chartData={this.state.lineChartData}
-          styles={{
-            padding: 12,
-            backgroundColor: "#fff",
-            marginBottom: "25px",
-          }}
-        />
+  const handleSetLineChartData = (type) =>
+    setLineChartData(lineChartDefaultData[type]);
 
-        <Row gutter={32}>
-          <Col xs={24} sm={24} lg={8}>
-            <div className="chart-wrapper">
-              <RaddarChart />
-            </div>
-          </Col>
-          <Col xs={24} sm={24} lg={8}>
-            <div className="chart-wrapper">
-              <PieChart />
-            </div>
-          </Col>
-          <Col xs={24} sm={24} lg={8}>
-            <div className="chart-wrapper">
-              <BarChart />
-            </div>
-          </Col>
-        </Row>
+  return (
+    <div className="app-container">
+      <a
+        href="https://github.com/NLRX-WJC/react-antd-admin-template"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="github-corner"
+      ></a>
 
-        <Row gutter={8}>
-          <Col
-            xs={24}
-            sm={24}
-            md={24}
-            lg={12}
-            xl={12}
-            style={{ paddingRight: "8px", marginBottom: "30px" }}
-          >
-            <TransactionTable />
-          </Col>
-          <Col
-            xs={24}
-            sm={24}
-            md={24}
-            lg={12}
-            xl={12}
-            style={{ marginBottom: "30px" }}
-          >
-            <BoxCard />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
+      <PanelGroup handleSetLineChartData={handleSetLineChartData} />
 
-export default Home;
+      <LineChart
+        chartData={lineChartData}
+        styles={{
+          padding: 12,
+          backgroundColor: "#fff",
+          marginBottom: "25px",
+        }}
+      />
+
+      <Row gutter={32}>
+        <Col xs={24} sm={24} lg={8}>
+          <div className="chart-wrapper">
+            <RaddarChart />
+          </div>
+        </Col>
+        <Col xs={24} sm={24} lg={8}>
+          <div className="chart-wrapper">
+            <PieChart />
+          </div>
+        </Col>
+        <Col xs={24} sm={24} lg={8}>
+          <div className="chart-wrapper">
+            <BarChart />
+          </div>
+        </Col>
+      </Row>
+
+      <Row gutter={8}>
+        <Col
+          xs={24}
+          sm={24}
+          md={24}
+          lg={12}
+          xl={12}
+          style={{ paddingRight: "8px", marginBottom: "30px" }}
+        >
+          <TransactionTable />
+        </Col>
+        <Col
+          xs={24}
+          sm={24}
+          md={24}
+          lg={12}
+          xl={12}
+          style={{ marginBottom: "30px" }}
+        >
+          <BoxCard />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default Dashboard;