過濾可觀測陣列

我在這個問題上跟進：mobX - Filter countries in react native?過濾可觀測陣列

在我自己的應用程序，我附上我的mobx觀察到的對象的火力點店。

我已經成功地開始工作，可以列出並刪除從商店獲得的值，這是在嘗試過濾時遇到問題。下面的代碼：

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};

我應該說，雖然我在這個問題上真正的自我因子評分小白，我已經試過漫長而艱難的問這個問題之前。

感謝任何幫助，謝謝！

來源

2017-01-30 Hookkid

你可以包括你的整個組件/商店嗎？很難說你的問題中的代碼有什麼問題。 – Tholle

現在只需更新商店代碼！謝謝你的時間。 – Hookkid

您擴展了'React.Component'，但您沒有'render'方法。然後創建一個實例並導出它。看起來你已經混合了一下。 – Tholle

所以這個問題不在數組或可觀察對象中，而是商店數據來自firebase快照。

我發現這篇2014年的文章是由其創始人解釋快照查詢的基礎知識，並在快速閱讀後，我設法使其工作。

下面是相關的代碼：

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

怡東！

來源

2017-01-31 00:47:59 Hookkid

過濾可觀測陣列

回答

相關問題