无法按照我想要的顺序渲染表单抛出新的子元素包含父元素

Question

我现在正在使用 JS 和 API 调用渲染动态表单，如果我使用然后链接它渲染表单，但不是按照我想要的顺序，并且我当前的代码显示无法执行追加子项并返回 [object Promise] 而不是我尝试的表单有很多方法可以渲染，但它不会渲染我用来解决承诺的任何其他方法仍然没有结果。 下面是我当前的代码，它仍然显示相同的错误：

createSelectComponent: async function (
            form,
            labelTextContent,
            defaultSelectTextContent,
            id,
            name,
            apiEndpoint
        ) {
            const label = document.createElement("label");
            form.appendChild(label);
            
            const select = document.createElement("select");
            select.id = id;
            select.name = name;

            try {
                const response = await fetch(apiEndpoint);
                const parsedResponse = await response.json();
                const data =
                    parsedResponse.categories ||
                    parsedResponse.brands ||
                    parsedResponse.users;

                data.forEach((object) => {
                    const option = document.createElement("option");
                    option.value = object.id || object.userId;
                    option.textContent =
                        object.categoryObjName ||
                        object.brandObjName ||
                        object.userName;
                    select.appendChild(option);
                });
            } catch (error) {}
            form.appendChild(select);

            return form;
        },

        createForm: async function (e) {
            const form = document.createElement("form");
            try {
                const brandSelectComponent = await this.createSelectComponent(
                    form,
                    "Select Brand:",
                    "Select Brand",
                    "brandSelect",
                    "brand",
                    "/get-brands"
                );
                form.appendChild(brandSelectComponent);
            } catch (error) {
                console.error(error);
            }

            try {
                const categorySelectComponent = await this.createSelectComponent(
                    form,
                    "Select Category:",
                    "Select Category",
                    "categorySelect",
                    "category",
                    "/get-categories"
                );
                form.appendChild(categorySelectComponent);
            } catch (error) {
                console.error(error);
            }

            // User select goes here

            return form;
        },

Answer 1

您不需要 form.appendChild(brandSelectComponent)，因为它已被附加到函数 createSelectComponent 中。

createSelectComponent: async function (
                form,
                labelTextContent,
                defaultSelectTextContent,
                id,
                name,
                apiEndpoint
            ) {
                const label = document.createElement("label");
                form.appendChild(label);
                const select = document.createElement("select");
                select.id = id;
                select.name = name;
                try {
                    const response = await fetch(apiEndpoint);
                    const parsedResponse = await response.json();
                    const data =
                        parsedResponse.categories ||
                        parsedResponse.brands ||
                        parsedResponse.users;

                    data.forEach((object) => {
                        const option = document.createElement("option");
                        option.value = object.id || object.userId;
                        option.textContent =
                            object.categoryObjName ||
                            object.brandObjName ||
                            object.userName;
                        select.appendChild(option);
                    });
                } catch (error) { }
                form.appendChild(select);
            },
            createForm: async function (e) {
                const form = document.createElement("form");
                try {
                    await this.createSelectComponent(
                        form,
                        "Select Brand:",
                        "Select Brand",
                        "brandSelect",
                        "brand",
                        "/get-brands"
                    );
                    await this.createSelectComponent(
                        form,
                        "Select Category:",
                        "Select Category",
                        "categorySelect",
                        "category",
                        "/get-categories"
                    );
                } catch (error) {
                    console.error(error);
                }
                return form;
            }
            //to use   const form = await createForm()