保留承諾價值以供將來使用：指南

Question

我正在執行資料庫查詢，然後處理數據，以便產生單一數值。該值需要在後續數組中使用。

陣列定義目前如下所示（如下）。問題是 all_kdm_coverage 是一個承諾。但我需要做的是從承諾中提取數值。

const scrolls = [
    {
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: all_kdm_coverage
    },
]

這是一個更大的程式碼片段，可提供更多上下文

async function GetCoverage(scroll_path) {
    const apiName = 'foo';
    const path = '/scrolls/' + scroll_path;
    const myInit = {
        headers: {},
        response: false,
    };
    const response = await API.get(apiName, path, myInit)
    console.log('response:',response)
    return response.Items
}

function GetScroll(scroll_name, scroll_array) {
    const scroll_data = scroll_array.find(scroll => scroll.Scroll === scroll_name);
    console.log('scroll_data:',scroll_data)
    return scroll_data
}

let dataGlobal;
const getData = () => (dataGlobal ??= GetCoverage("all"));

const all_kdm_coverage = getData().then(
    (data) => {
        const  kdm_entry = GetScroll("kdm", data)
        const coverage = kdm_entry.Coverage
        console.log('kdm coverage:',coverage)
        return coverage
    }
)

const scrolls = [
    {
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: all_kdm_coverage
    },
]

// For completeness, here is how the scrolls array gets used 
export const DanzanRyuCollection = () => {
    return (
        <>
            <h1 className="h1_index">Scrolls</h1>
            <Collection
                type="list"
                items={scrolls}
                gap="1.0rem"
                alignItems="center">
                {(item, index) => (
                    <ScrollCard
                        key={index}
                        padding="1rem">
                        <Link href={item.link}>
                            {item.title}
                        </Link>
                        <Rating ratings={[item.coverage]}/>
                    </ScrollCard>
                )}
            </Collection>
        </>
    );
};

在 scrolls 中設定 coverage: 值的最佳方法是什麼？

更新： 建議執行以下操作

const scrolls = [
    {
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: await all_kdm_coverage
    },
]

但這會導致以下錯誤，表明其處於實驗階段且不受完全支持

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
console.error @ client.js:1
window.console.error @ next-dev.js:27
overrideMethod @ react_devtools_backend_compact.js:2367
handleErrors @ hot-dev-client.js:131
processMessage @ hot-dev-client.js:202
eval @ hot-dev-client.js:50
eval @ websocket.js:58
handleMessage @ websocket.js:57```

Answer 1

展開Bergi的評論

const scrolls = [];
all_kdm_coverage.then(coverage => { 
 scrolls.push({ 
   title: "Kadena de Mano",
   link: "./Kdm", 
   coverage, 
  }) 
})