如何将JSON文件数据用作react-select的自定义选项？

你目前使用硬编码的选项数组，想要将jurisdiction.json中的数据转换为react-select所需的格式——以code字段为value，jurisdiction字段为label，可以通过以下两种方式实现：

方法1：导入本地JSON文件并转换格式 #

如果JSON文件是项目本地文件，直接导入后映射成react-select要求的结构即可：

修改后的完整代码 #

import React, { useState } from "react";
import Button from "@ui/button";
import Select from "react-select";
// 导入本地JSON文件，注意路径需与当前组件匹配
import jurisdictions from "./jurisdiction.json";

// 将JSON数据转换为react-select需要的{ value, label }结构
const selectOptions = jurisdictions.map(item => ({
  value: item.code,
  label: item.jurisdiction
}));

function Company({}) {
    const [selectedOption, setSelectedOption] = useState(null);
    
    return (
        <>
            <form className="company-form">
                <div className="p-3 pt-0">
                    <label className="mt-3" htmlFor="jurisdiction-code">
                        Company Jurisdiction
                    </label>
                    <Select
                        className="text-xl"
                        defaultValue={selectedOption}
                        onChange={setSelectedOption}
                        // 使用转换后的选项数组
                        options={selectOptions}
                        required
                        isClearable={true}
                        id="jurisdiction-code"
                    />
                </div>
                <div className="mt-5">
                    <Button size="medium" fullwidth>
                        Submit
                    </Button>
                </div>
            </form>
        </>
    );
}

export default Company;

核心要点 #

• 导入JSON时确保文件路径正确，比如同目录下直接写./jurisdiction.json
• 通过map遍历原始JSON数组，将每个对象转换为react-select标准的选项结构

方法2：远程加载JSON文件（文件不在本地项目中） #

如果JSON文件是远程接口提供的，使用useEffect配合fetch加载并转换数据：

修改后的代码示例 #

import React, { useState, useEffect } from "react";
import Button from "@ui/button";
import Select from "react-select";

function Company({}) {
    const [selectedOption, setSelectedOption] = useState(null);
    const [selectOptions, setSelectOptions] = useState([]);

    useEffect(() => {
        // 替换为你的远程JSON文件实际地址
        fetch("/api/jurisdictions")
            .then(res => res.json())
            .then(data => {
                // 转换为react-select需要的结构
                const options = data.map(item => ({
                    value: item.code,
                    label: item.jurisdiction
                }));
                setSelectOptions(options);
            })
            .catch(err => console.error("加载选项失败：", err));
    }, []);
    
    return (
        <>
            <form className="company-form">
                <div className="p-3 pt-0">
                    <label className="mt-3" htmlFor="jurisdiction-code">
                        Company Jurisdiction
                    </label>
                    <Select
                        className="text-xl"
                        defaultValue={selectedOption}
                        onChange={setSelectedOption}
                        options={selectOptions}
                        required
                        isClearable={true}
                        id="jurisdiction-code"
                        // 加载过程中显示加载状态
                        isLoading={selectOptions.length === 0}
                    />
                </div>
                <div className="mt-5">
                    <Button size="medium" fullwidth>
                        Submit
                    </Button>
                </div>
            </form>
        </>
    );
}

export default Company;

核心要点 #

• 用useEffect在组件首次挂载时发起请求
• 请求成功后转换数据结构并更新状态
• 添加isLoading属性优化加载时的用户体验

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