React应用报错：动态为reportFields添加选项值失败排查

核心问题 #

1. React Hooks使用违规：useState和useEffect是React Hooks，必须在React组件的顶层作用域内调用，你直接在模块级别（组件外部）定义状态，违反了Hooks的使用规则，会触发React报错。
2. 静态常量无法响应状态更新：reportFields是静态导出的常量，初始化时只会捕获categoryOptions的初始空数组值，后续categoryOptions通过接口请求更新后，reportFields不会自动同步更新，导致options始终为空。

修复方案 #

将所有逻辑移入React组件内部，通过useMemo让reportFields响应状态变化：

import { useState, useEffect, useMemo } from 'react';

const getAllCategories = () => {
  let url = `/category/list/active`;
  return http.get(url)
    .then(response => {
      const data = response.data;
      return data.ok ? data.data : [];
    })
    .catch(error => {
      console.error('Error:', error);
      return [];
    });
};

interface Category {
  id: string;
  name: string;
}

// 所有逻辑必须包裹在React组件内
const YourReportComponent = () => {
  // 给状态添加明确类型，避免类型歧义
  const [categoryOptions, setCategoryOptions] = useState<{value: string; text: string}[]>([]);

  useEffect(() => {
    const fetchCategories = async () => {
      const categories = await getAllCategories();
      setCategoryOptions(
        categories.map(category => ({
          value: category.name,
          text: category.name,
        }))
      );
    };
    fetchCategories();
  }, []);

  // 用useMemo根据categoryOptions动态生成reportFields，依赖变化时自动更新
  const reportFields = useMemo(() => [
    {
      headerName: "Category",
      field: "category_id",
      disabled: false,
      default: true,
      prefix: "",
      suffix: "",
      dbField: "final.category_name",
      type: "string",
      options: categoryOptions
    }
  ], [categoryOptions]);

  // 在这里使用reportFields，比如传给表格组件等
  return (
    <div>
      {/* 你的组件内容，例如表格 */}
    </div>
  );
};

export default YourReportComponent;

关键修复点说明 #

• Hooks移至组件内部：确保useState和useEffect在组件顶层调用，符合React的规则。
• useMemo实现响应式：useMemo会监听categoryOptions的变化，每当状态更新时，重新生成reportFields，保证options始终是最新的接口返回数据。
• 类型优化：给useState添加明确的类型定义，提升代码的可维护性和类型安全性。

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