React+TypeScript中Store类实例化报错：GetDataStore不是构造函数求助

这个错误的核心问题是导入导出的方式不匹配，咱们一步步来修正：

1. 修正导入导出不匹配的问题 #

你在GetDataStore.ts里用的是默认导出：

export default GetDataStore;

但在React组件里却用了命名导入（带大括号的写法）：

import { GetDataStore } from "../../stores/GetDataStore";

这种不匹配会导致GetDataStore变量实际上是undefined，自然没法当作构造函数来实例化。

你有两种修正方案：

• 方案一：保持默认导出，修改导入方式
  把组件里的导入改成不带大括号的默认导入：

  import GetDataStore from "../../stores/GetDataStore";
  

• 方案二：改用命名导出
  把Store文件里的导出改成命名导出：

  export class GetDataStore {
    // 类内容不变
  }
  // 删掉原来的export default GetDataStore;
  

  这样组件里原来的import { GetDataStore }写法就可以正常工作了。

2. 顺便修复getData方法的异步问题 #

另外，你的getData方法目前没有返回异步操作的结果，调用store.getData()会直接得到undefined，咱们一起把这个也修正：

修改Store里的getData方法，让它返回Promise链：

class GetDataStore {
  public getData() {
    const url = "http://localhost:50774/api/Data";
    // 一定要return整个fetch的Promise链
    return fetch(url)
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong in retrieving data");
        }
      })
      .catch(error => {
        console.log(error);
        // 重新抛出错误，让调用组件可以捕获处理
        throw error;
      });
  }
}
export default GetDataStore;

然后在React组件里，因为是异步操作，要使用async/await或者.then()来获取数据，另外componentWillMount已经被React标记为过时，建议改用componentDidMount：

import GetDataStore from "../../stores/GetDataStore";

export class View extends React.Component<RouteComponentProps<{}>> {
  private store = new GetDataStore();

  public async componentDidMount() {
    try {
      const data = await this.store.getData();
      // 这里拿到数据后可以做 setState 或者其他处理
      console.log("获取到的数据：", data);
    } catch (err) {
      // 处理请求失败的情况
      console.error("请求出错：", err);
    }
  }

  // 其他组件代码...
}

这样就能同时解决构造函数错误和异步数据获取的问题啦。

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