函數返回promise，而不是值

Question

我有一個函數可以調用Node后端，並檢索對象數組。 該函數名為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);
            });
    });
}

此函數由另一個函數getAllGroupNames調用，該函數檢索對象並從中獲取所有組名。 該函數返回一個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代碼中的函數調用getAllGroupNames並嘗試遍歷數組以為每個值返回一個新的Checkbox元素時，就會出現問題。

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>
        ));
    });
}

如果將console.log()放在getAllGroupNames().then()函數周圍，它將返回一個未解決的getAllGroupNames().then() 。 我不知道該怎么做，而不是返回一個承諾，而是返回需要渲染的元素。

如果我在前一個then()的末尾鏈接一個附加的.then()並記錄該值-它列出了我確實需要的值。 但是，當我退還這些時，它沒有任何作用。

預先感謝您對我的幫助。

Answer 1

除了創建new Promise您還可以返回db query的結果。 但是，從性能角度來看，對render方法進行數據庫調用聽起來並不好。

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;
    });

}