gpt4 book ai didi

javascript - 从布局组件中的文件加载时如何避免无限循环?

转载 作者:行者123 更新时间:2023-11-29 22:58:57 25 4
gpt4 key购买 nike

我正在按照 https://mithril.js.org/simple-application.html 中的简单应用示例使用 Mithril JS 构建个人网页。和 http://lhorie.github.io/mithril-blog/better-templates-with-fp.html 中的布局示例.但是我不断遇到一个组件需要从文件加载数据的无限循环。

如果我通过“vnode.attrs”将内部文件加载组件传递给它,布局组件不会循环。但是,如果我使用函数中的内部组件构建布局组件,它就会循环。我无法理解其中的区别。

失败的例子:

hello.json

{"text": "hello"}

index.html

<!DOCTYPE html>
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="index.js"></script>
</body>

index.js

var Hello = {
loadedObj: {},
load: function () {
return m.request({
method: "GET",
url: "hello.json",
}).then(function (result) { Hello.loadedObj = result })
}
}

var HelloBox = {
oninit: Hello.load,
view: function () { return m("div", {}, Hello.loadedObj.text) }
}

var layout = function (comp) {
return {
view: function () { return m('div', {}, m(comp)) }
}
}

var workingLayout = {
view: function (vnode) { return m('div', {}, m(vnode.attrs.comp)) }
}

m.route(document.body, "/workinghello", {
"/hello": {
render: function () {
console.log("rendering /hello")
return m(layout(HelloBox))
}
},
"/workinghello": {
render: function () {
console.log("rendering /workinghello")
return m(workingLayout, { comp: HelloBox })
}
}
})

在这里,路由“/workinghello”有效,但“/hello”进入循环。为什么? “/workinghello”设计对我来说似乎是一种代码味道,因为“vnode.attrs”通常仅用于将数据传递给文档中的组件而不是组件本身。有没有办法修复“/hello”或简化“/workinghello”?

最佳答案

仅从初步阅读:layout 返回一个函数,而 workingLayout 似乎只是定义一个函数然后退出(不返回任何内容)。这包括对 m(...) 的调用,但如果对 m(...) 的调用正在调用返回的函数,则您有一个循环。

作为调试的一般好策略,当您有一个工作示例和一个非工作示例时,对一个进行小的更改,使其更像另一个并进行测试,然后重复,直到您的行为符合您的要求将开关更改为与您将其更改为更像的开关具有相同的行为。然后来回切换该更改并测试行为是否随之来回更改,以确认此特定更改是否有所不同。这是制作 minimal reproducible example 的一部分并且经常会直接帮你解决问题。

关于javascript - 从布局组件中的文件加载时如何避免无限循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56025368/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com