1

我正在尝试从其映射运算符内部的数组日志记录创建一个流，但我的代码似乎出了点问题，我无法指出...

import {Slider} from './slider/slider'
import xs from 'xstream'

export function App(sources) {
    const props = {
        marbles$: xs.fromArray([{
            color: 'red',
            x: 0
        }, {
            color: 'blue',
            x: 20
        }])
    }

    props.marbles$.map(item => {
        console.log(item) // nothing displayed on here
        return item
    })
    return Slider(Object.assign(sources, {props}))
}

在这个小代码中，我只是简单地创建了一个 props 对象，其中包含来自数组的 marbles$ 流。

就在下面，我尝试登录流中的每个项目，但没有任何反应，我不明白为什么。

Plunker 在这里：https ://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

HTML 文件上无任何显示，仅在 JS 文件上显示

任何想法 ？

4

2 回答 2

2

如果您在props.marbles$.map(....)没有捕获其输出的情况下调用，您将创建一个简单地放在地板上并且从未使用过的流。因为这只是函数式编程，所以它的大小写相同，const y = Math.round(x)但写成Math.round(x). 它将采用 number x，将其返回到最接近的整数，然后删除结果。

由于您只想使用控制台调试值，因此我建议使用 xstream 运算符debug()。只需将其添加到运算符链中：

const props = {
    marbles$: xs.fromArray([{
        color: 'red',
        x: 0
    }, {
        color: 'blue',
        x: 20
    }]).debug()
}

如果您使用一些 linting 工具，例如https://github.com/bodil/eslint-config-cleanjs，它会警告您有未使用的返回值的语句。

于 2017-04-20T10:06:21.447 回答
1

如xstream文档中所述，流在获得第一个listener之前是空闲的（未执行） ，这是通过该addListener方法完成的。

请注意下面的props.marbles$.map流被分配给变量y。然后y.addListener调用该方法。当addListener被调用时，props.marbles$.map方法最终被执行。

const props = {
  marbles$: xstream.Stream.fromArray([{
    color: 'red',
    x: 0
  }, {
    color: 'blue',
    x: 20
  }])
}

const y = props.marbles$.map(item => {
    console.log('map', item)
    return item
})

y.addListener({})

控制台中的输出：

map > Object {color: "red", x: 0}
map > Object {color: "blue", x: 20}

或者，您可以将 放在侦听器console.log的属性中而不是方法中：nextmap

const y = props.marbles$.map(item => {
  return item
})

y.addListener({
  next: item => console.log('listener', item)
})

控制台中的输出：

listener > Object {color: "red", x: 0}
listener > Object {color: "blue", x: 20}

或者，正如André 建议的那样，您可以使用 xstream debug：

const props = {
  marbles$: xstream.Stream.fromArray([{
    color: 'red',
    x: 0
  }, {
    color: 'blue',
    x: 20
  }]).debug('debug 1')
}

const y = props.marbles$.map(item => {
  return item
}).debug('debug 2')

y.addListener({})

控制台中的输出：

debug 1 > Object {color: "red", x: 0}
debug 2 > Object {color: "red", x: 0}
debug 1 > Object {color: "blue", x: 20}
debug 2 > Object {color: "blue", x: 20}
于 2017-04-20T18:52:59.440 回答