我像这样使用mithriljs组件状态:
const Dashboard = () => {
let ExpenseAmount = 0;
let IncomeAmount = 0;
let UserFullname = '';
const getExpense = () => {
ExpenseAmount = 1000;
};
const getIncome = () => {
IncomeAmount = 2000;
};
const getUserFullname = () => {
setTimeout(() => {
console.log('calling fullname');
UserFullname = 'Mike'; //<----
}, 1000);
}
getUserFullname();
return {
view: () => [
m("div", { class: "container-fluid flex-grow-1 container-p-y" }, [
m(
"h4",
{
class:
"media align-items-center font-weight-bold py-3 mb-4"
},
[
m("img", {
src: "assets/img/avatars/1.png",
class: "ui-w-50 rounded-circle"
}),
m("div", { class: "media-body ml-3" }, [
m("span", `Welcome back, ${UserFullname}!`),
m(
"div",
{ class: "text-muted text-tiny mt-1" },
m(
"small",
{ class: "font-weight-normal" },
`Today is ${new Date().toDateString()}`
)
)
])
]
)
])
]
};
};
我希望我可以调用并ajax
函数和它的回调/承诺将更新UserFullname
。但它不起作用。我尝试使用 setTimeout 简化它,但它仍然不起作用。
如何解决 ajax 调用或 priomise 或 setTimeout 中的更新状态?
谢谢
一旦数据发生更改,Mithril 将不知道重绘 - 因此您需要通过在 getUserFullname
函数体末尾调用 m.redraw()
来告诉它。
您当前拥有的位置:
const getUserFullname = () => {
setTimeout(() => {
UserFullname = 'Mike';
}, 1000);
}
你应该写:
const getUserFullname = () => {
setTimeout(() => {
UserFullname = 'Mike';
m.redraw();
}, 1000);
}
这是一个工作演示,突出显示了修复程序。