Question

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

在我自己的应用程序中，我将我的mobx observable对象附加到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>
    )
  }
}

你看我是否过滤了我在我的过滤（）函数中创建的模拟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年的文章由其创始人解释了快照查询的基础知识，在快速阅读后我设法让它发挥作用。

这是相关的代码：

＆＃13;

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

＆＃13;

精益！

过滤Observable数组

1 个答案: