mithirl.js 中使用异步函数更新组件

Question

我正在尝试使用异步函数 oninit 获取组件的一些初始数据，然后更新每次单击 'Show more' 按钮时该组件。

组件如下：

const Listings = {
    oninit: async (vnode) => {
        vnode.state.data = await get_listings()
        console.log("Ok has data ", vnode.state.data)
    },
    view: vnode => {

        console.log("NOK undefined ", vnode.state.data)

        return m("section.anunturi.mb-4", [

            vnode.state.data.map(data => {
                return m("span", JSON.stringify(data, undefined, 2))
            }),

            m("button", {class:"btn", onclick:get_listings}, "Show more")
        ])
    }
}

oninit 从async 函数中获取数据但未保存在vnode.state.data

Answer 1

第一次加载时，数据未立即准备好，因此数据未定义并引发 javascript 错误，添加一个条件以防止在数据准备好之前显示数据 vnode.state.data ? /* display it */ : /* display loading message */
一旦数据准备就绪，您需要通过调用 m.redraw() 告诉 mithril 重绘，[redraw]，我在 oninit 的末尾添加了那个调用，它基于 Mozilla 的 async/await 文档，应将其视为 promise 的 then() 函数的内容（[async]，即在等待的数据返回后调用

[异步]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

[重画] https://mithril.js.org/redraw.html

const Listings = {
    oninit: async (vnode) => {
        vnode.state.data = await get_listings()
        console.log("Ok has data ", vnode.state.data)
        m.redraw();
    },
    view: vnode => {

        console.log("NOK undefined ", vnode.state.data)

        return m("section.anunturi.mb-4", [

            vnode.state.data ? vnode.state.data.map(data => {
                return m("span", JSON.stringify(data, undefined, 2))
            }) : "Waiting for data...",

            m("button", {class:"btn", onclick:get_listings}, "Show more")
        ])
    }
}

mithirl.js 中使用异步函数更新组件

Updating component with async function in mithirl.js

javascript

async-await

mithril.js