Web包WordPress和ReactJS从数据库调用数据

我请求用wordpress数据库中的静态统计数据制作一个

rechart

图表。我已经在我的测试网站上创建了一个数据库。数据库表名为“statistics”，它有“name”、“uv”、“pv”和“amt”字段

我试图以这种方式调用它，但得到错误“数据未定义”。这是错误的图像

这就是我现在使用的代码

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
import * as Recharts from "recharts";
import axios from "axios";

const { AreaChart, Area, Tooltip } = Recharts;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      statistics: [],
      error: "",
    };
  }
  componentDidMount() {
    const WordPressSiteUrl = "http://cwnd.epizy.com/";
    this.setState({ loading: true }, () => {
      axios
        .get(`${WordPressSiteUrl}/wp-json/wp/v2/statistics`)
        .then((res) => {
          this.setState({ loading: false, statistics: res.data });
        })
        .catch((error) =>
          this.setState({ loading: false, error: error.response.data })
        );
    });
  }

  render() {
    const { statistics } = this.state;
    return (
      <div className="main">
        <div className="header">
          <h3>Graph Widget</h3>
          <select className="select">
            <option>Last 7 days</option>
            <option>Last 15 days</option>
            <option>Last 1 motnh</option>
          </select>
        </div>
        <LineChart
          className="center"
          width={600}
          height={400}
          data={data}
          margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
        >
          <Line type="monotone" dataKey={statistics.uv} stroke="#8884d8" />
          <Line type="monotone" dataKey={statistics.pv} stroke="#82ca9d" />
          <Line type="monotone" dataKey={statistics.amt} stroke="#FF7F50" />
          <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
          <XAxis dataKey={statistics.name} />
          <YAxis />
          <Tooltip />
        </LineChart>
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“recharts”导入{LineChart，Line，CartesianGrid，XAxis，YAxis}；
从“Recharts”导入*作为Recharts；
从“axios”导入axios；
const{AreaChart，Area，Tooltip}=Recharts；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
统计数字：[]，
错误：“”，
};
}
componentDidMount（）{
const WordPressSiteUrl=”http://cwnd.epizy.com/";
this.setState（{loading:true}，（）=>{
axios
.get（`${WordPressSiteUrl}/wp json/wp/v2/statistics`）
。然后（（res）=>{
this.setState（{loading:false，statistics:res.data}）；
})
.catch（（错误）=>
this.setState（{loading:false，error:error.response.data}）
);
});
}
render（）{
const{statistics}=this.state；
返回(
图形小部件
最后7天
过去15天
最后1个月
);
}
}
导出默认应用程序；

请进一步指导我该做什么。谢谢