Préserver la valeur de l'engagement pour une utilisation future : un guide

Question

J'effectue une requête dans la base de données, puis je traite les données afin de produire une valeur numérique unique. Cette valeur doit être utilisée dans les tableaux suivants.

La définition du tableau ressemble actuellement à ceci (ci-dessous). Le fait est que all_kdm_coverage est une promesse. Mais ce que je dois faire, c'est extraire la valeur numérique de la promesse.

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

Voici un extrait de code plus grand pour fournir plus de contexte

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

Quelle est la meilleure façon d'obtenir

dans les valeurs scrolls 中设置 coverage: ?

Mise à jour : Il est recommandé de faire ce qui suit

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

Mais cela entraîne l'erreur suivante, indiquant qu'il est expérimental et qu'il n'est pas entièrement pris en charge

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

Développer le commentaire de Bergi

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