Hilla 类型“Promise<void>”缺少类型中的以下属性

Question

尝试在 hilla(vaadin) 中创建一个应用程序，它将列出产品及其详细信息。为了对产品进行分类，需要存储与类别相关的信息，但在尝试在 hilla/vaadin 网格中列出类别时面临的问题。从端点返回类别列表，并在商店中消耗该列表并尝试在网格中显示。尝试运行应用程序时出现错误“

Type 'Promise<void>' is missing the following properties from type

”

@Nonnull 是在列表的响应中指定的，并且在方法中仍然出现错误

下面是端点类

@Endpoint
@AnonymousAllowed
public class ProductEndpoint {

    private InterProductService productService;

    @Autowired
    public ProductEndpoint(InterProductService productService) {
        this.productService = productService;
    }

    public List<ProductDataList> fetchAllProducts() {
        return this.productService.fetchProducts("");
    }

    public @Nonnull List<@Nonnull ProductCategoryDataList> fetchAllProdCategory() {
        return this.productService.fetchProductCategory("");
    }

    @Nonnull
    public EndpointResponse saveCatgeory(@Nonnull CategoryDetails categoryDetails) {
        return this.productService.saveCategory(categoryDetails);
    }

}

下面是商店

export class ProductStore {
    constructor() {
        makeAutoObservable(
            this);
        this.fetchProductCatgeory();
    }

    async saveProductCategory(prodCategory: CategoryDetails) {
        const responseData = await ProductEndpoint.saveCatgeory(prodCategory);
        return responseData;
    }

    async fetchProductCatgeory() {
        const prodCatData = await ProductEndpoint.fetchAllProdCategory();
        runInAction(() => {
            return prodCatData;
        });
    }

}

特定于该产品和类别模块的存储类

export class CategoryListRegisterViewStore {

    categoryList: ProductCategoryDataList[] = [];

    constructor() {
        makeAutoObservable(
            this,
            {
                categoryList: observable.shallow,
            }
        );
        this.loadProductCategory();
    }

    loadProductCategory() {
        //return appStore.tricampCrmProductStore.fetchProductCatgeory();
        const prodCategory = appStore.tricampCrmProductStore.fetchProductCatgeory();
        runInAction(() => {
            this.categoryList = prodCategory;
        });
    }

    saveProductCategory(categoryDetails: CategoryDetails) {
        return appStore.tricampCrmProductStore.saveProductCategory(categoryDetails);
    }
}

export const categoryListRegisterViewStore = new CategoryListRegisterViewStore();

带有网格代码的 HTML 页面如下

<vaadin-grid theme="row-stripes" .items="${categoryListRegisterViewStore.loadProductCategory}" >

<vaadin-grid-column header="Action" frozen-to-end auto-width flex-grow="0" ${columnBodyRenderer(this.actionRenderer,
    [])}>
</vaadin-grid-column>

尝试了多种方法，例如直接从方法返回，但收到不同的错误，例如 AllItem 未迭代。虽然检查承诺也“未定义”。所以也许我犯了一些错误，期待有人可以支持解决问题

Answer 1

您的代码中存在多个问题：

1. 网格的items属性绑定到 加载类别的方法。您应该将其绑定到从该方法加载的类别，该类别应存储在categoryListRegisterViewStore.categoryList：

<vaadin-grid theme="row-stripes" .items="${categoryListRegisterViewStore.categoryList}" > 

2. 该CategoryListRegisterViewStore.loadProductCategory方法尝试将 的结果fetchProductCatgeory（返回 a ）分配Promise给categoryList类型为 的属性ProductCategoryDataList[]。这就是您收到类型错误的地方。您应该等待承诺解决，然后存储承诺的结果：

    async loadProductCategory() {
        const prodCategory = await appStore.tricampCrmProductStore.fetchProductCatgeory();
        runInAction(() => {
            this.categoryList = prodCategory;
        });
    }

3. 最后，该fetchProductCatgeory方法是有缺陷的。它不会返回端点调用的结果，因为您将返回结果包装到了runInAction. 相反，只需直接从端点调用返回承诺：

    fetchProductCatgeory() {
        return ProductEndpoint.fetchAllProdCategory();
    }

此时，您可能会考虑完全删除该方法并直接使用端点来loadProductCategory代替。