React-Admin TypeScript运行时错误：未用new调用内置Promise构造函数

错误原因 #

你遇到的控制台错误，根源是useState的初始值设置错误：你把类型Promise<any>直接当成了初始值传入，React会尝试调用这个类型（把它当作构造函数），但Promise必须用new关键字实例化，所以触发了这个报错。另外你的代码还有两个潜在问题：useEffect没有依赖数组会导致无限重复请求，以及异步数据未加载完成时直接传给JobFilterBuilder可能引发异常。

修正步骤及代码 #

1. 修正useState的初始值与类型
   用useState的泛型语法指定数据类型，初始值设为符合业务逻辑的空值（比如空数组，对应接口返回的数组类型）：

   // 假设res.data是数组类型，用泛型指定类型，初始值设为空数组
   const [companies, setCompanies] = useState<any[]>([]);
   

2. 给useEffect添加依赖数组
   空数组作为useEffect的第二个参数，确保数据请求只在组件挂载时执行一次：

   useEffect(()=>{
     DataProvider.getList("companies").then(res => setCompanies(res.data));
   }, []) // 空依赖数组，仅挂载时执行
   

3. 处理异步加载状态（可选但推荐）
   因为数据是异步获取的，初始状态下companies是空数组，建议在数据未准备好时显示加载提示，避免JobFilterBuilder处理空数据出错：

   if (companies.length === 0) {
     return <div>加载中...</div>;
   }
   

完整修正后的代码示例 #

export const JobsList = () => {
  // 用泛型指定companies的类型，初始值设为空数组
  const [companies, setCompanies] = useState<any[]>([]);

  useEffect(()=>{
    DataProvider.getList("companies").then(res => setCompanies(res.data));
  }, []) // 添加空依赖数组，避免无限请求

  // 处理加载状态
  if (companies.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <List filters={JobFilterBuilder(companies)}>
      {/* 其他组件内容 */}
    </List>
  );
};

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