Reactjs rxjssubscribe从不执行

每次地图的标记发生变化时，我都要计算并更新地图的区域。所以我试图从地图的标记中创建一个可观察的对象并订阅它：

class Map extends Component {

  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
    const markers$ = Observable.from(this.props.markers)
    markers$.subscribe(x => console.log('observable', x))
  }

最初，我只是在console.logging中记录标记，但最终我希望在标记更改时运行getRegionForCoordinates，然后运行this.props.updateRegion。没有任何内容会登录到控制台。我做错了什么？this.props.markers最初是一个空数组

Map.js

[编辑] 下面是使用rx observables的解决方案，但在发布后不久，我就在想：你确定你需要observables的力量来实现你想要的吗

我认为你应该只考虑使用组件作为反应方式来观察变化。我想这很适合你的需要。 您可以在此回调中完全触发getRegionForCoordinates和this.props.updateRegion，而不需要任何可观察的对象。 [结束编辑]

我知道你在努力实现什么。首先，您必须了解Observable.from只接受单个对象/值，然后忽略对初始对象所做的任何更改

const value = [1]
const obs$ = Observable.from(arr)
obs$.subscribe(console.log.bind(console)) // < this will only print once
value.push(2); // < this will be ignored and wont fire anything

我们还需要实现组件WillReceiveProps，为我们的标记提供支持$

---

现在，这将触发对markers$的订阅调用。

当调用observable.from时，observable将根据this.prop.markers的当前值创建。Observable.from不设置从阵列到可观察对象的任何动态链接。当this.props.markers发生变化时，您需要执行类似发送到主题的操作。@torazaburo谢谢。我真的很难实现这个主题。当props.markers发生变化时，我无法让它再次启动。JS中没有观察或观察某个变量或数组的概念。您必须安排知道this.props.markers何时更改、已更改或可能已更改。谢谢。你可能是对的，我不需要一个可观察的。但是从理论上讲，教我一点RxJS，在你答案中的解决方案中，使用一个可观察的，我在哪里调用getRegionForCoordinates，然后调用this.props.updateRegion？我可以在componentDidMount中添加订阅此.markers$吗？与此类似，但调用我的两个函数。订阅{next:x=>console.log'get value'+x，错误：err=>console.error'发生错误：'+err，complete:=>console.log'done'，}；确切地说，您需要在componentDidMount中添加一个subscribe，并从那里调用getRegionForCoordinates和this.props.updateRegion。警告，如果未对订阅或下一个回调使用箭头函数，则需要将回调绑定到此回调，否则它不会在回调标记$.subscribebeffunction回调{/*..*/}.bindthis中定义

import { createSelector } from 'reselect'


const searchResultsSelector = state => {
  return state.get('searchResults')
}

const selectMarkers = createSelector(
  searchResultsSelector,
  (searchResults) => {
    const shops = searchResults ? searchResults.map(result => {
      return result.shops.map(shop => {
        return {
          id: shop.f1,
          name: shop.f2,
          latitude: shop.f4,
          longitude: shop.f3
        }
      })
    }) : searchResults
    const shopIds = []
    const flattenedShops = [].concat.apply([], shops)
    const uniqueShops = flattenedShops.map(shop => {
      if (!shopIds.includes(shop.id)) {
        shopIds.push(shop.id)
        return shop
      }
    })
    const finalMarkers = uniqueShops.filter(n => n != undefined)
    return finalMarkers
  }
)

export default selectMarkers

const value = [1]
const obs$ = Observable.from(arr)
obs$.subscribe(console.log.bind(console)) // < this will only print once
value.push(2); // < this will be ignored and wont fire anything

componentDidMount() {
  //...
  this.markers$ = new Observable.Subject()
  //you can subscribe here to this observable
  this.markers$.next(this.props.markers)
}

componentWillReceiveProps(nextProps) {
  this.markers$.next(nextProps.markers)
}