Question

我正在尝试使用这样的打字稿来创建商店：

class GetDataStore {

    public getData() {
        const url = "http://localhost:50774/api/Data";
        fetch(url).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw new Error("Something went wrong in retrieving data");
            }
        }).then(resData => { return resData })
            .catch(error => { console.log(error) });
    }
}

export default GetDataStore;

我正在尝试将此商店的实例实例化为：

import { GetDataStore } from"../../stores/GetDataStore";
..
..
export class View extends React.Component<RouteComponentProps<{}>> {

    private store = new GetDataStore();

    public componentWillMount() {
        const data = store.getData();
    }
}

但是我收到了一个错误：

_GetDataStore.GetDataStore不是新视图的构造函数

我做错了什么

Answer 1

您正在将GetDataStore类导出为默认导出，但将其作为命名导出导入。您可以从导入周围删除括号：

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

RTFM也应该在这里工作：export guide from MDN

Answer 2

您的import语句是命名导入，但您使用的是default导出。

解决方案1（使用default导出）：

尝试更换：

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

使用：

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

解决方案2（使用命名导出）：

卸下：

export default GetDataStore;

并替换：

class GetDataStore {

使用：

export class GetDataStore {

使用商店类对Ajax调用做出反应

2 个答案: