在 React 中使用键和值添加不同的 id 从 csv 标题中选择多个

Question

当我上传 csv 文件时，我将标题和行分开以供将来使用。我想使用react-select显示该csv的所有标题，用户可以选择他们想要保留的标题和不保留的标题。

我已成功将标头名称添加到状态变量中，但无法渲染反应选择内的值。我想添加不同的 id 以及值和名称参数作为 dict 对象，并选择和取消选择标头名称。

我正在附加编码沙箱以获得更清晰的想法将csv标题加载到react select中

目前的实现看起来与附图相同：

Answer 1

您的代码有很多问题。

• 我将声明一个

  value

  状态来代表所选选项。

• 不要在React组件函数中创建

  fileReader

  实例。每次渲染组件时，都会创建一个新的

  fileReader

  实例，这是不必要的。

• 转换CSV数据来选择选项，数据结构可以是

  { label: string; value: string; }[]

• 当触发

  onChange

  事件时，调用

  setValue()

  而不是

  setOptions()

  设置所选选项。

• 通过调用

  csvFileToArray()

  在

  setValue()

  函数中设置所选选项。

import React, { useState } from 'react';
import Select from 'react-select';

function App() {
    const [file, setFile] = useState();
    const [options, setOptions] = useState([]);
    const [value, setValue] = useState();

    const handleOnChange = (e) => {
        setFile(e.target.files[0]);
    };

    const csvFileToArray = (csvString) => {
        const csvHeader = csvString.slice(0, csvString.indexOf('\n')).split(',');
        const arr = csvHeader.map((item) => ({
            value: item,
            label: item,
        }));
        console.log(arr);
        setValue(arr);
        setOptions(arr);
    };

    const handleOnSubmit = (e) => {
        e.preventDefault();
        if (file) {
            const fileReader = new FileReader();
            fileReader.onload = function (event) {
                const text = event.target.result;
                csvFileToArray(text);
            };
            fileReader.readAsText(file);
        }
    };

    const onhandleSelect = (data) => {
        setValue(data);
    };

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>LOAD CSV DATA INTO REACT SELECT</h1>
            <form>
                <input type={'file'} id={'csvFileInput'} accept={'.csv'} onChange={handleOnChange} />
                <button
                    onClick={(e) => {
                        handleOnSubmit(e);
                    }}>
                    IMPORT CSV
                </button>
            </form>
            <Select
                className="react-select-container"
                classNamePrefix="react-select"
                isMulti
                name="form-field-name"
                value={value}
                onChange={onhandleSelect}
                options={options}
            />
        </div>
    );
}

export default App;

用于测试的 CSV 文件示例。

addresses.csv

：

John,Doe,120 jefferson st.,Riverside, NJ, 08075
Jack,McGinnis,220 hobo Av.,Phila, PA,09119
"John ""Da Man""",Repici,120 Jefferson St.,Riverside, NJ,08075
Stephen,Tyler,"7452 Terrace ""At the Plaza"" road",SomeTown,SD, 91234
,Blankman,,SomeTown, SD, 00298
"Joan ""the bone"", Anne",Jet,"9th, at Terrace plc",Desert City,CO,00123

代码沙盒