React开发WordPress插件：REST API获取dummy表数据展示图表失败求助

1. 先修复React组件的核心错误 #

你的代码里有几个React基础使用问题，这是图表无数据的直接原因之一：

• 没有用状态管理异步数据：Response变量只在axios回调内部有效，组件渲染时根本拿不到
• ResponsiveContainer必须指定宽高，否则图表无法正常渲染
• 异步请求没放在useEffect里，会导致组件每次渲染都重复发请求

修改后的React代码：

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

// 后面要换成正确的自定义API地址
const API_URL = "http://localhost/wordpress2/wp-json/custom/v1/dummy-data";

const Dashboard = () => {
    const [chartData, setChartData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        axios.get(API_URL)
            .then(response => {
                console.log(response.data);
                setChartData(response.data);
                setLoading(false);
            }).catch(err => {
                console.error(err);
                setError(err.message);
                setLoading(false);
            });
    }, []);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>错误: {error}</div>;

    return (
        <div className='dashboard'>
            <div className="card">
                <h3>数据统计</h3>
                {/* 给ResponsiveContainer设置宽高 */}
                <ResponsiveContainer width="100%" height={400}>
                    <LineChart data={chartData}>
                        <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;

2. 修复WordPress REST API端点问题 #

WordPress默认的wp/v2接口只支持内置内容（文章、页面等），没法通过?query=dummy直接访问自定义数据表dummy。你需要在插件的PHP代码里注册一个自定义REST端点，用来读取dummy表的数据：

在插件主PHP文件里添加以下代码：

add_action('rest_api_init', function () {
    // 注册自定义端点：wp-json/custom/v1/dummy-data
    register_rest_route('custom/v1', '/dummy-data', array(
        'methods' => 'GET',
        'callback' => 'get_dummy_table_data',
        'permission_callback' => function () {
            // 限制仅管理员可访问，可根据需求调整权限
            return current_user_can('manage_options');
        }
    ));
});

function get_dummy_table_data() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'dummy'; // 确保表名是wp_dummy（如果你的数据库前缀是默认wp_）
    
    // 按需调整SQL语句，确保返回字段和React图表的dataKey匹配
    $data = $wpdb->get_results("SELECT post, likes, dislikes FROM $table_name", ARRAY_A);
    
    if (empty($data)) {
        return new WP_Error('no_data', 'dummy表中无数据', array('status' => 404));
    }
    
    return $data;
}

关键注意事项： #

• 确认你的数据表名是wp_dummy（前缀和WordPress数据库一致），不一致就修改$table_name的值
• 调整SQL查询的字段，必须和React图表里的dataKey（post、likes、dislikes）对应
• 先测试端点：访问http://localhost/wordpress2/wp-json/custom/v1/dummy-data，能看到JSON格式的返回数据才算成功

3. 跨域问题处理（如果需要） #

如果你的React代码不在WordPress本地环境运行，需要在WordPress里添加跨域支持：

add_action('init', function () {
    header("Access-Control-Allow-Origin: *"); // 开发环境用*，生产环境指定具体域名
    header("Access-Control-Allow-Methods: GET");
});

4. 验证数据格式 #

确保dummy表返回的数据是Recharts需要的数组对象格式，示例：

[
    {"post": "文章1", "likes": 120, "dislikes": 20},
    {"post": "文章2", "likes": 80, "dislikes": 15},
    {"post": "文章3", "likes": 200, "dislikes": 30}
]

最后把React代码里的API_URL替换成你注册的自定义端点地址，重新运行插件，图表就能正常加载数据了。

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