过滤 Observable 数组

Question

我正在跟进这个问题：

在我自己的应用程序中，我将我的 mobx 可观察对象附加到 firebase 存储。

我已经设法开始工作，可以列出和删除我从商店获得的值，但在尝试过滤时我遇到了问题。这是代码：

import React from 'react';
import {map} from 'lodash';
import { observable, computed } from 'mobx';
import { observer } from 'mobx-react';
import {todos} from '../../store/todos/todos';

@observer
export class TodosListComponent extends React.Component {

  del = (id) => {
    todos.del(id)
  };


@observable sampleArray = [
      {'name': 'Amsterdam'},
      {'name': 'United States'},
      {'name': 'Vienna'}
    ];


  @observable filterTermValue = '';
  @computed get filtered() {
      let filteredList = this.sampleArray.filter(
        t=>t.name.indexOf(this.filterTermValue)>-1
      );
      if (filteredList.length)
        return filteredList;
      return todos.json;


    }

  render() {
    return (
        <ul>
          {map(this.filtered, (it, key) => (
                  <li onClick={this.del.bind(this, key)}
                      key={key}>{it.name}</li>)
          )}
        </ul>
    )
  }
}

你看，如果我过滤我在 filtered() 函数中创建的模拟 sampleArray，它会起作用（除了假数据）。

如果我尝试过滤 json 对象，我会收到一条错误消息，指出过滤器不是函数。

过滤我的存储结果以将其转换为 js 数组的最佳方式是什么？如果是这样的话，你会怎么做？

这是商店代码：

import {observable, computed} from 'mobx';
import {Fb} from '../../firebase/firebase-store';
import {map, toJS} from 'mobx';

class Todos {
  

  constructor() {
    Fb.todos.on('value', (snapshot) => {
      this.todos = snapshot.val();
    });
  }

  @computed get json() {
    return toJS(this.todos);
  }

  add = (name) => {
    const id = Fb.todos.push().key;
    this.update(id, name);
  };

  update = (id, name) => {
    Fb.todos.update({[id]: {name}})
  };

  del = (id) => {
    Fb.todos.child(id).remove();
  };
}

const todos = new Todos();
export {todos};

我应该说，虽然我是一个真正的自强不息的菜鸟，但在问这个问题之前我已经尝试了很长时间。

感谢任何帮助，谢谢！

Answer 1

所以问题不在数组或可观察对象中——而是存储数据来自 firebase 快照这一事实。

我发现这篇 2014 年的文章由其创始人解释快照查询的基础知识，快速阅读后我设法让它工作。

这是相关的代码片段：

Fb.todos.orderByChild("name").equalTo("whattosearchforhere").on('value', (snapshot) => {
      this.todos = snapshot.val();
    });

精益求精！

过滤 Observable 数组

Filtering Observable arrays

javascript

reactjs

mobx

mobx-react