如何從資料庫中獲取資料

大家好，我正在構建一個 wordpress 插件，我在其中實作了一個小部件，該小部件使用 rest api 從名為 dummy 的 wordpress 資料表中顯示分析圖表，但我沒有這樣做。我正在使用 reactjs 構建插件，使用 axios 從資料庫中獲取資料，并使用 recharts 來顯示分析圖表。

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import axios from 'axios';


const API_URL = "http://localhost/wordpress2/wp-json/wp/v2?query=dummy"

const Dashboard = () => {
    axios.get(API_URL)
    .then(Response => {console.log(Response.data);

  }).catch(err => console.log(err));

    return (
        <div className='dashboard'   >
            <div className="card" >
                <h3>Analytics</h3>
                <ResponsiveContainer>
                    <LineChart  data={Response}>
                        <XAxis dataKey="post" />
                        <YAxis />
                        <Legend/>
                        <Tooltip />
                        <CartesianGrid stroke="#eee"   />
                        <Line type="monotone" dataKey="likes" stroke="#8884d8" />
                        <Line type="monotone" dataKey="dislikes" stroke="#82ca9d" />
                    </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}


export default Dashboard;

在我的 wordpress 儀表板插件中運行良好，圖表也顯示，但沒有資料，它會在 apiurl 問題解決時顯示。

uj5u.com熱心網友回復：

所以通常你必須在旁邊的控制臺中看到你的資料，我建議你把它放到useEffect 掛鉤中（參見@varun-kaklia response）。順便說一句，您必須將資料存盤在某個地方才能使用它（這里與您的 LineChart 組件一起使用）。

我建議您將資料存盤在 react 中最簡單的存盤中：useState。

    import React, { useEffect, useState } from 'react';
    import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
    import axios from 'axios';


    const API_URL = "http://localhost/wordpress2/wp-json/wp/v2?query=dummy"

    const Dashboard = () => {
       const [data, setData] = useState(null);

       useEffect(() => {
           axios.get(API_URL)
            .then(Response => { setData(Response.data) })
            .catch(err => console.log(err));
       }, []);
    
    if (!data) return <p>Loading...</p>;

    return (
        <div className='dashboard'>
            <div className="card">
                <h3>Analytics</h3>
                <ResponsiveContainer>
                <LineChart data={data}>{/* Here you use the state data */}
                    <XAxis dataKey="post" />
                    <YAxis />
                    <Legend/>
                    <Tooltip />
                    <CartesianGrid stroke="#eee"   />
                    <Line type="monotone" dataKey="likes" stroke="#8884d8" />
                    <Line type="monotone" dataKey="dislikes" stroke="#82ca9d" />
                </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}

uj5u.com熱心網友回復：

嘿@Jit，您需要在 useEffect 鉤子中呼叫 axios，例如-

const[data,setData] = useState()
useEffect(()=>{
    const apiData = axios.get(API_URL)
        .then(Response => {
            console.log(Response.data);
        })
        .catch(err => console.log(err));

    if (apiData.length>0){
        setData(apiData);
    }
}, []);

試試這個代碼，如果你仍然遇到問題，讓我知道。我會幫助你更多。謝謝

uj5u.com熱心網友回復：

我瀏覽了您的代碼，發現其中有一些錯誤。嘗試使用此代碼呼叫 API

useEffect(() => {
       axios({
       method:'get', 
       url: 'http://localhost/wordpress2/wp-json/wp/v2?query=dummy'
       })
        .then(Response => { setData(Response.data) })
        .catch(err => console.log(err));
   }, []);

標籤：反应WordPressaxioswordpress-rest-api

上一篇：在WordPress中創建具有所需時間的自定義計劃

下一篇：WooCommerce產品的SKU更新