javascript - Cyclejs 和 xstream 不显示任何内容

Question

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

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}))
}

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

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

---

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

HTML 文件中不显示任何内容，仅在 JS 文件中显示

有什么想法吗？

Answer 1

如果您在调用 props.marbles$.map(....) 时未捕获其输出，您将创建一个简单地丢弃在地板上且从未使用过的流。因为这只是函数式编程，所以它与 const y = Math.round(x) 相同，但写为 Math.round(x)。它会取数字 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 ，它会警告您有未使用的返回值的语句。