Question

我正在尝试在Cycle.js中将HTTP请求的结果打印到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);
  }
})

Answer 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类似于数组，将它们视为数组非常有用，但它们不 ARRAYS并且不可互换带数组。仅在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

Answer 2

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

我解决了我的具体案例：

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

以下是一些相关的讨论：

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

2 个答案: