微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Webpack WordPress和ReactJS从数据库调用数据

如何解决Webpack WordPress和ReactJS从数据库调用数据

我请求从wordpress数据库中制作一个带有静态统计信息的rechart图。我已经在测试网站中创建了一个数据库数据库名称是“统计”,并且具有“名称”,“ uv”,“ pv”和“ amt”字段。

我试图以这种方式调用它,但是出现错误“未定义数据”。这是错误图片

the error image

这是我现在正在使用的代码

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;

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。