属性获取器不会在Typescript中的React中触发

时间:2019-01-23 16:55:23

标签: reactjs typescript

在React中,我拥有一个对服务器进行API调用并获取响应的视图。响应的类型为ApiResponseModel

// omissis - imports section

interface IProductViewState {
    products: ProductModel[];
}

export class ProductView extends Component<{}, IProductViewState> {
    constructor(props: {}) {
        super(props);

        this.state = {
            products: new Array<ProductModel>(),
        };
    }

    public componentDidMount() {
        HttpService.getProducts().then((data: ApiResponseModel) => {
            this.setState({
                products: data.Result.Results as ProductModel[],
            });
        });
    }

    public render() {
        return (
                <DataTable value={this.state.products} selectionMode="single" header="Prodotti" rows={30}
                                        responsive={true}>
                    <Column field="Timer1" header={"Product_Timer1"} sortable={true} />
                    // some other columns
                </DataTable>
        );
    }
}

ApiResponseModel类如下

export class ApiResponseModel {
    public Result: any;
}

ProductModel类如下

export class ProductModel {
    // some properties

    private _TIMER1!: any;
    public get Timer1(): any {
        return _TIMER1 + " minutes";
    }
    public set Timer1(v: any) {
        this._TIMER1 = v;
    }
}

现在的问题是,将模型加载到DataTable组件时,永远不会调用Timer1属性的get方法。出于测试目的,我尝试编写以下代码,在这种情况下,将数据加载到DataTable中时将调用get方法。

export class ProductView extends Component {
    public products = new Array<ProductModel>();

    constructor(props: {}) {
        super(props);
    }

public getProducts() {
    const products = new Array<ProductModel>();
    const product = new ProductModel();
    product.Timer1 = 12;
    products.push(product);
    return products;
}

public render() {
    return (
            <DataTable value={this.getProducts()} selectionMode="single" header="Prodotti" rows={30}
                                        responsive={true}>
                <Column field="Timer1" header={"Product_Timer1"} sortable={true} />
                // some other columns
            </DataTable>
        );
    }
}

为什么第一个代码不起作用?

0 个答案:

没有答案