React Hooks使用Papa.parse上传CSV返回空数组及指定列展示问题

• 浏览器受沙箱安全限制，无法直接读取本地磁盘的绝对路径，你硬编码的C:/Users/Project/contacts.csv路径不具备前端可访问性
• 文件上传组件的e.target.value返回值仅为文件名字符串，并非真实的文件内容；同时初始csvData定义为数组类型，onChange回调中却将其修改为对象结构，类型不匹配导致数据存储异常
• PapaParse解析本地上传文件时需要传入File实例，传入路径字符串无法正常解析内容，因此返回空数组

import { useState } from 'react';
import Papa from 'papaparse';

const ManageNominees = () => {
    // 存储解析后的CSV结构化数据
    const [csvData, setCsvData] = useState([]);
    // 存储用户上传的文件实例
    const [uploadFile, setUploadFile] = useState(null);

    const onChange = (e) => {
        const file = e.target.files?.[0];
        if (file) {
            setUploadFile(file);
        }
    }

    const importCSV = () => {
        if (!uploadFile) return;
        Papa.parse(uploadFile, {
          complete: updateData,
          header: true,
          skipEmptyLines: true // 自动跳过空行，避免无效空数据
        });
    };

    const updateData = (result) => {
        // 过滤仅保留需要的Name、E-mail 1 - Value两列数据
        const filteredData = result.data.map(item => ({
            name: item['Name'],
            email: item['E-mail 1 - Value']
        }));
        console.log(filteredData);
        setCsvData(filteredData);
    }

    return (
        <div>
            <h1>Upload Data</h1>
            <input
              className="CSVData"
              type="file"
              name="file"
              accept=".csv" // 限制仅可选择CSV格式文件
              onChange={onChange}
            />
            <button onClick={importCSV}>Upload CSV</button>

            {/* 页面渲染指定两列内容 */}
            {csvData.length > 0 && (
                <table border="1" style={{ marginTop: '20px', borderCollapse: 'collapse' }}>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>E-mail 1 - Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {csvData.map((item, index) => (
                            <tr key={index}>
                                <td>{item.name}</td>
                                <td>{item.email}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )}
        </div>
    )
}

export default ManageNominees

• 拆分state存储逻辑，单独存储上传文件实例和解析后的结构化数据，避免类型冲突
• 从文件上传事件的e.target.files[0]中获取真实的文件对象传入PapaParse进行解析
• 解析完成后直接过滤仅保留需要的两列数据，减少冗余存储
• 页面新增表格组件，解析完成后自动渲染目标字段内容

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