创建泛型接口后使用useState报错，求TypeScript解决方案

错误原因 #

你搞反了React useState Hook的解构顺序。useState返回的数组是**[状态值, 更新状态的函数]**，当前代码把更新函数和状态值的位置写反了，导致setTestRow实际是状态变量（初始值为undefined），而非可调用的更新函数，因此抛出"无法调用对象"的错误。

修正代码 #

function AdvanceTextField<T>({ props, columns, endPoint }: CustomAdvancedProps<T>) {
  // 修正解构顺序：状态值testRow在前，更新函数setTestRow在后
  // 显式传入初始值null，让状态类型更明确（T | null）
  const [testRow, setTestRow] = useState<T | null>(null);

  const modalOnClose = (value: T) => {
    console.log(`Select row: ${value}`);
    // value != null 已同时排除null和undefined，无需重复判断
    if (value != null) {
      setTestRow(value);
    }
  };
}

额外优化点 #

1. 给useState显式设置初始值null，让状态类型严格符合定义的T | null，避免出现undefined的模糊情况。
2. 简化条件判断：value != null已经包含对null和undefined的校验，不需要额外写value !== undefined。

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