Javascript 函数返回承诺，而不是值

我有一个函数，它调用我的节点后端，并检索一个对象数组。此函数名为queryDatabase，如下所示：

function queryDatabase(locationName, timeFrame) {
    const location = locationName.charAt(0).toUpperCase() + locationName.slice(1);
    return new Promise((resolve) => {
        Axios.get(`/api/measurements/${location}/${timeFrame}`)
            .then((resp) => {
                console.log('RESPONSE', resp);
                resolve(resp.data);
            });
    });
}

此函数由另一个函数getAllGroupName调用，该函数检索对象并从中获取所有组名。此函数返回一个promise，其中包含我的前端需要呈现的组名列表数组

export default function (locationName) {
    const arrayOfGroupNames = [];
    return new Promise((resolve) => {
        queryDatabase('Pagodedreef', 'uur').then((data) => {
            data.forEach((measurement) => {
                measurement.groups.forEach((group) => {
                    if (!arrayOfGroupNames.includes(group.name)) {
                        arrayOfGroupNames.push(group.name);
                    }
                });
            });
            resolve(arrayOfGroupNames);
        });
    });
}

我觉得上面的代码是正确的。但是，当前端React代码中的函数调用GetAllGroupName并尝试迭代数组以为每个值返回一个新的复选框元素时，就会出现问题

renderCheckboxes() {
    getAllGroupNames('Pagodedreef').then((array) => {
        return array.map((groupName, index) => (
            <div className="checkboxes" key={index.toString()}>
                <label htmlFor={groupName}>
                    <input
                        type="checkbox"
                        id={groupName}
                        value={groupName}
                        onChange={this.onCheckboxChange}
                        checked={this.props.selectedGroups.includes(groupName)}
                    />
                    {groupName}
                </label>
            </div>
        ));
    });
}

如果在getAllGroupNames.then函数周围放置一个console.log，它将返回一个未解析的承诺。我不知道如何才能不返回承诺，而是返回需要呈现的元素

如果我链接了一个额外的。然后在上一个的末尾，然后记录它的值-它列出了我确实需要的值。但同样，当我返回这些-它没有效果

提前感谢您的帮助。

您只需返回db查询结果，而无需创建新的承诺。然而，从性能角度来看，对渲染方法进行db调用听起来并不好

export default function (locationName) {
    return queryDatabase('Pagodedreef', 'uur').then((data) => {
        const arrayOfGroupNames = [];
        data.forEach((measurement) => {
            measurement.groups.forEach((group) => {
                if (!arrayOfGroupNames.includes(group.name)) {
                    arrayOfGroupNames.push(group.name);
                }
            });
        });
        return arrayOfGroupNames;
    });

}

---

避开这个！我觉得上面的代码是正确的。你的感觉不正确render方法不应调用querydatabase方法。我如何才能不返回承诺，而返回需要呈现的元素。-你根本不能。它们将只在将来提供。感谢您抽出时间回复。我重写了你描述的函数。但是，在rendercheckbox方法中，getAllGroupName.then仍然返回一个未解析的承诺。我不太明白我需要如何重写该函数以利用我们刚才所做的更改。在db访问函数中也存在同样的问题。从db获取数据时不要创建承诺，并在收到数据后立即返回。好的，我已从queryDatabase中删除了新承诺，而是从附加到Axios.get的.then方法返回相应的数据。我遇到的问题是，当我在Axios.get.then方法周围放置一个console.log时，它会返回一个未解决的承诺，而不是resp.data。一旦进入承诺链，您将始终得到该承诺。您只能在then方法中访问promise的结果，而不能在其周围访问。这是有道理的。但是，我如何确保我的rendercheckbox得到它所需要的div值呢？