React TypeScript中通过useState传递JSON对象数组的正确实现

DevOps 小满

2026-7-6

React TypeScript中正确导入本地分类数组的解决方法

错误根源

你收到ts(2345)错误的核心原因是误用了JSON.parse()：categories本身就是一个TypeScript数组对象，并非JSON格式的字符串，但JSON.parse()要求参数必须是字符串，类型不匹配导致报错。

修正后的`useDictionary.ts`实现

不需要对本地导入的数组做任何解析操作，直接使用即可。以下是两种可行的实现方式：

方式一：直接用静态数据初始化State（推荐，适合静态数据）

import { useState } from "react";
import categories from "../data/categories";

// 显式声明类型，和categories结构完全匹配
type DataCategoryType = {
  value: string;
  label: string;
};

const useDictionary = () => {
  // 直接将categories作为State初始值，TypeScript会自动验证类型
  const [category, setCategory] = useState<DataCategoryType[]>(categories);

  // 可选：返回setCategory，方便外部组件修改分类数据
  return {
    category,
    setCategory
  };
};

export default useDictionary;

方式二：使用`useEffect`初始化（适合未来可能改为从API获取数据的场景）

import { useState, useEffect } from "react";
import categories from "../data/categories";

type DataCategoryType = {
  value: string;
  label: string;
};

const useDictionary = () => {
  const [category, setCategory] = useState<DataCategoryType[]>([]);

  useEffect(() => {
    // 静态数据直接赋值，无需解析
    setCategory(categories);
  }, []); // 空依赖确保只执行一次初始化

  return { category };
};

export default useDictionary;