Question

以下代码按预期工作：它创建了两个计数器按钮，它们保持其状态并在点击时更新：

let Counter = function (vnode) {
  let count = 0

  return {
    view: (vnode) => {
      return m("button",
        {
          onclick: function () {
            console.log(count++)
          }
        }, "Count: " + count)
    }
  }
}

let Counters = {
  view: () => [
    m(Counter),
    m(Counter),
  ]
}

m.mount(document.body, Counters)

但是，如果我在单独的变量中定义 Counter 组件数组并将其传递给 Counters 视图函数，则视图将停止更新。状态仍然存在，我可以看到记录到控制台的计数增加，但屏幕上没有任何变化。这是更新后的代码：

let Counter = function (vnode) {
  let count = 0

  return {
    view: (vnode) => {
      return m("button",
        {
          onclick: function () {
            console.log(count++)
          }
        }, "Count: " + count)
    }
  }
}

let counters = 
  [
    m(Counter),
    m(Counter),
  ]
let Counters = {
  view: () => counters
}

m.mount(document.body, Counters)

为什么会发生这种情况？这是我正在处理的更复杂的 Mithril 应用程序的一个玩具示例，我想在其中对子组件数组进行任意排序。

Answer 1

我认为可能发生的情况是，在您设置数组时组件正在“渲染”，因为 JavaScript 评估表达式的方式，counters 数组中的 Mithril 组件在您尝试之前已经执行稍后安装它们，因此 Mithril 重绘机制（通过 m.mount 或 m.route）可能不“知道”这些组件，因此不是重绘队列的一部分。

let counters = 
  [
    m(Counter),
    m(Counter),
  ]

我不确定您想要实现什么，但也许更好的解决方案是将数据数组保存在纯 JS 数据结构中，当您需要实际渲染组件时，您可以映射数据结构，例如

let Counter = function (vnode) {
  return {
    view: (vnode) => {
      return m("button",
        {
          onclick: function () {
            console.log(this, vnode.attrs.count++);
          }
        }, "Counter #" + vnode.attrs.id +": " + vnode.attrs.count)
    }
  }
}

let counterList = [
  { id: 1, name: "Something 1", count: 0 },
  { id: 2, name: "Something 2", count: 0 },
  { id: 3, name: "Something 3", count: 0 },
]

let reorderCountersByCountAscending = () => {
  counterList.sort((a, b) => (a.count > b.count) ? 1 : -1)
}

let Counters = {
  view: () => {
    return m('div',
      m('button', { onclick: reorderCountersByCountAscending }, 'Reorder Children'),
      counterList
        .map((counterListItem) => m(Counter, counterListItem))
    )
  }
}

m.mount(document.body, Counters);

这不是一个理想的实现，有很多状态突变以非常隐含的方式发生，它可能会在现实世界的应用程序中导致很多混乱，但我希望它描述了这种方法。

这里还有一些示例供您查看： https://jsfiddle.net/9hu2yd1s/

Answer 2

我能够在 Mithril Gitter 聊天中收集有用的反馈，并将在下面发布我学到的东西。

我的示例中的计数器没有更新的原因是因为它们在 counters 数组中定义了一次，随后被返回。由于每次调用 view() 的 Counters 函数时都会返回相同的数组，因此 Counters 认为不需要更新，因为它认为它返回的元素没有改变。即使数组内的 Counter 元素更新，对数组的引用仍然保持不变。

处理此问题的一种方法是定义一个工厂函数，该函数将在每次调用 Counter 上的 view() 函数时返回一个新的 Counters 元素排序数组。此外，应用程序状态需要保存在全局位置，传递给每个 Counter 的唯一参数是它引用的全局计数器的索引，如下所示：

let counterData = [0, 0]

let Counter = {
  view: ({
    attrs: {
      index
    }
  }) => {
    return m("button", {
      onclick: () => counterData[index]++
    }, "Count: " + counterData[index])
  }
}

let Counters = function () {
  const counters = () => {
    return counterData.sort((a, b) => a - b).map((count, i) => m(Counter, {
      index: i
    }, count))
  }

  return {
    view: () => counters()
  }
}

m.mount(document.body, Counters)

可以在 here 中找到一个有效的 JSFiddle。

为什么 Mithril 子组件状态改变不会触发更新？

2 个答案: