2

我正在跟进这个问题：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>
    )
  }
}

你看如果我过滤我在我的 filters() 函数中创建的模拟 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};

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

感谢任何帮助，谢谢！

4

1 回答 1

2

所以问题不在于数组或可观察对象 - 而是存储数据来自 firebase 快照的事实。

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

这是相关的代码：

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

精益求精！

于 2017-01-31T00:47:59.543 回答