Cycle.js HTTP 响应在 DOM 中打印为未定义答案

【问题标题】：Cycle.js HTTP response prints as undefined in DOMCycle.js HTTP 响应在 DOM 中打印为未定义
【发布时间】：2018-08-03 21:24:05
【问题描述】：

我正在尝试将 HTTP 请求的结果打印到 Cycle.js 中的 DOM。现在我只是想列出结果，但它们最终会出现在选择下拉列表中。

我创建了流...

const facilityRequest$ = xs.of({
  url: 'http://...',
  category: 'facility'
});

然后选择它...

 const facilityResponse$ = sources.HTTP
  .select('facility')
  .flatten()
  .map(res => res.body.data)
  .startWith([]);

但是当我尝试将结果添加到顶部时：

const vdom$ = form$.map(form =>
  div([
    facilityResponse$.map(res => p(res.id)),
  ])
);

它在浏览器窗口中显示为undefined。

但是，如果我添加一个侦听器并将响应记录到控制台，它会显示一系列设施：

facilityResponse$.addListener({
  next: (res) => {
    console.log(res);
  }
})

【问题讨论】：

我将 debug debug() 添加到 facilityResponse$ 并可以看到正确的数据，但由于某种原因它没有添加到 DOM 中。

标签： javascript cyclejs xstream-js

【解决方案1】：

是的！您找到了处理数组流的正确方法。

// CORRECT :)
const facilityVDom$ = facilityResponse$.map(facilities => // <- this is an array
  ul( // <- notice no brackets here, because you already have an array
    facilities.map(f => li(f.id)) // <- ...and array map returns an array
  )
);

但这不是difficulty with lists 的问题。

STREAMS 随着时间的推移类似于数组，将它们视为数组很有用，但它们不是数组并且不可互换与数组。仅在 STREAM 上下文中使用流，并且仅在 ARRAY 上下文中使用数组——因此您的第一次尝试会出现问题：

// WRONG :(
const vdom$ = form$.map(form =>
  div([ // <-- the `div` function can take an ARRAY of VDOMs as parameter
    facilityResponse$.map(res => p(res.id)), // <-- this is a STREAM, not a VDOM
  ])
);

您在这里有两个错误：1) 您在数组上下文中使用了流，2) 您将您认为可以与数组互换的内容包装在数组中。因此，您提供给 div 函数的参数是一个包含一个元素的数组，而该元素是一个流，而不是 VDOM 对象。

提供给div（或类似）函数的ARRAY 必须包含VDOM 对象（或返回VDOM 对象的函数）。如：

div( [ p('1'), p('2'), p('3') ] ) // OR

div( [1,2,3].map(ii => p(ii))   ) // OR

let arr = [1,2,3]
div( arr.map(ii => p(ii))       )

STREAM 上的map 方法采用一个函数，该函数将您切换出流上下文。您可以在此函数中实际使用流，但它们通常没有用处，并且从不可与数组互换。

stream$.map(         // <- stream
  function (elem) {  // <- leaving stream

    // regular javascript here
    // transform each element of the stream
    // and return it to the stream
    return elem
  }
)                    // <- back to stream

【讨论】：

啊，谢谢，这是有道理的！到目前为止，我真的很喜欢 Cycle.js，我希望文档更强大一点！我发现自己查看源文件和以前的 Github 问题来回答我的很多问题。

【解决方案2】：

事实证明，使用 cycle.js 处理列表是出了名的困难。要做到这一点，您可以使用 @cycle/collection 库或映射数组元素并将它们组合成一个项目（这取决于您想用它做什么）。

我解决了我的特殊情况：

const facilityVDom$ = facilityResponse$.map(facilities => ul(facilities.map(f => li(f.id))));

以下是一些相关的讨论：

【讨论】：