Next.js中getStaticProps的正确使用与组件数据传递指南

// components/Sidebar.js (原始代码中的问题所在)

// ... 其他导入和函数定义

export async function getStaticProps() { // 此处的 getStaticProps 不会被 Next.js 调用
    // ... 数据获取和处理逻辑
    console.log(plots_a); // 不会执行
    return {
        props: {
            plots: plots_a,
        },
    };
}

const Sidebar = ({ plots, selectedCell, setSelectedCell }) => {
    // ... Sidebar 组件逻辑
    // 这里的 plots 将会是 undefined，因为 getStaticProps 未被执行
};

export default Sidebar;

import Papa from 'papaparse';
import { scaleLinear, quantile } from 'd3';

export const fetchData = async () => {
    const response = await fetch('data_csv/singapore-tess.csv');
    const reader = response.body.getReader();
    const result = await reader.read();
    const decoder = new TextDecoder('utf-8');
    const csv = decoder.decode(result.value);

    return new Promise((resolve, reject) => {
        Papa.parse(csv, {
            header: true,
            complete: function (results) {
                const output = {};
                results.data.forEach(row => {
                    for (const key in row) {
                        if (!output[key]) output[key] = [];
                        // 确保数据为数字类型，以便D3计算
                        output[key].push(parseFloat(row[key]));
                    }
                });
                resolve(output);
            },
            error: function (error) {
                reject(error);
            }
        });
    });
};

export const processPlotData = (keyValues, width) => {
    const plots = {};
    for (const key in keyValues) {
        const data = keyValues[key].filter(d => !isNaN(d)).sort((a, b) => a - b); // 过滤NaN并排序
        if (data.length > 0) {
            const p5 = quantile(data, 0.05);
            const p95 = quantile(data, 0.95);
            // 确保 domain 范围有效，避免 p5 === p95 导致错误
            const domainMin = isFinite(p5) ? p5 : Math.min(...data);
            const domainMax = isFinite(p95) ? p95 : Math.max(...data);
            const xScale = scaleLinear().domain([domainMin, domainMax]).range([0, width]);
            plots[key] = { data, xScale: xScale.copy() }; // 使用 copy() 避免引用问题
        } else {
            // 处理空数据情况
            plots[key] = { data: [], xScale: scaleLinear().domain([0, 1]).range([0, width]) };
        }
    }
    return plots;
};

import React, { useState } from "react";
import Sidebar from "../components/Sidebar"; // 导入 Sidebar 组件
import { fetchData, processPlotData } from "../utils/dataProcessing"; // 导入抽象出的数据处理函数
import ViolinPlot from "../components/ViolinPlot"; // 假设 ViolinPlot 也是一个单独的组件

// 注意：ViolinPlot 组件也需要被正确导入或定义
// 原始代码中的 ViolinPlot 组件
const ViolinPlotComponent = ({ width, height, variable, data, xScale }) => {
    // Render the ViolinPlot component using the provided data and xScale
    if (!data || !xScale) {
        return <div>Loading...</div>;
    }
    // ViolinShape 需要从 components/ViolinShape 导入
    // 这里为了示例，假设 ViolinShape 已经可用
    const ViolinShape = () => <rect width={width} height={height} fill="lightblue" />; // 简化示例

    return (
        <svg style={{ width: width * 0.9, height: height * 2 }}>
            <ViolinShape
                height={height}
                xScale={xScale}
                data={data}
                binNumber={10}
            />
        </svg>
    );
}

// getStaticProps 在页面组件中导出
export async function getStaticProps() {
    try {
        const keyValues = await fetchData();
        // 定义一个示例宽度，实际应用中可能需要动态计算或从配置中获取
        const plotWidth = 200; 
        const plots = processPlotData(keyValues, plotWidth);

        console.log("getStaticProps plots:", plots); // 现在这个 console.log 会在服务器端输出

        return {
            props: {
                plots, // 将处理后的数据作为 props 返回
            },
            // revalidate: 60, // 可选：启用增量静态再生 (ISR)，每60秒重新生成一次
        };
    } catch (err) {
        console.error("Error in getStaticProps:", err);
        return {
            props: {
                plots: {}, // 错误时返回空对象
            },
        };
    }
}

// 页面组件接收 plots 作为 props
const DataDashboardPage = ({ plots }) => {
    const [selectedCell, setSelectedCell] = useState({}); // 示例状态

    return (
        <div className="container mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">数据仪表盘</h1>
            <div className="flex">
                <div className="flex-grow">
                    {/* 主要内容区域 */}
                    <p>这里是仪表盘的主要内容。</p>
                </div>
                {/* 将 plots 数据传递给 Sidebar 组件 */}
                <Sidebar
                    plots={plots}
                    selectedCell={selectedCell}
                    setSelectedCell={setSelectedCell}
                />
            </div>
        </div>
    );
};

export default DataDashboardPage;

import React, { useState, useEffect, useRef } from "react";
import ViolinPlot from "./ViolinPlotComponent"; // 导入 ViolinPlot 组件，假设它在单独的文件中

const Sidebar = ({ plots, selectedCell, setSelectedCell }) => {
    const [sidebarWidth, setSidebarWidth] = useState(0);
    const sidebarRef = useRef(null);

    useEffect(() => {
        const handleResize = () => {
            if (sidebarRef.current) {
                const width = sidebarRef.current.offsetWidth;
                setSidebarWidth(width);
            }
        };

        handleResize();
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return (
        <div ref={sidebarRef} className="sidebar shadow-md bg-zinc-50 overflow-auto w-1/3 p-4">
            <h2 className="text-xl font-semibold mb-4">侧边栏数据</h2>
            {Object.entries(selectedCell).map(([key, value]) => (
                <div key={key} className="p-4 border mb-4 bg-white rounded">
                    <h3 className="text-lg font-bold mb-2">{key}</h3>
                    <p>{value}</p>
                    {/* 确保 plots 和 plots[key] 都存在 */}
                    {plots && plots[key] ? (
                        <ViolinPlot
                            width={sidebarWidth}
                            height={50}
                            variable={key}
                            data={plots[key].data}
                            xScale={plots[key].xScale}
                        />
                    ) : (
                        <p className="text-sm text-gray-500">无 {key} 绘图数据</p>
                    )}
                </div>
            ))}
            {Object.keys(selectedCell).length === 0 && (
                <p className="text-gray-600">请选择单元格以查看详细信息。</p>
            )}
        </div>
    );
};

export default Sidebar;