javascript - 过滤 Observable 数组

Question

我正在跟进这个问题:mobX - Filter countries in react native?

在我自己的应用程序中，我将 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();
    });

精益求精!