javascript - mobX - 反応ネイティブで国をフィルタリングしますか?

Question

3 つの国の配列と、それらをフィルター処理するためのテキスト入力があります。テキスト入力を入力すると、国名に対して入力した内容がチェックされ、フィルタリングされたテキストに一致する国の新しいフィルタリングされたリストが返されます。また、入力されたテキストを横に表示する必要がありますTyped Text:

import React, { Component } from 'react'
import { View, Text, TextInput } from 'react-native'
import { observable, action } from 'mobx';
import { observer } from 'mobx-react/native'

@observer
export default class Country extends Component {
    @observable filterTermValue;
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    render() {
        return (
            <View>
                <Text>Typed Text: {this.filterTermValue}</Text>
                <TextInput placeholder="Start typing country"
                   value={this.filterTermValue}
                   onChange={this.onChangeFilterTerm} />

                {this.countriesList.map(country =>
                    <View key={country.slug}>
                      <Text>{country.name}</Text>
                    </View>
                )}
            </View>
        )
    }

    @action onChangeFilterTerm = (e) => {
        this.filterTermValue = e.target.value;

        this.countriesList.replace(this.countriesList.filter(el => el.name.toLowerCase().indexOf(this.filterTermValue.toLowerCase()) > -1));
    }
}

それが私が持っているすべてのロジックであり、それを機能させることができません。機能する唯一のことは、国のリストが元の配列をロードすることです。入力を開始すると、値は未定義で印刷されず、リストはフィルタリングされません。asyncアクションも試しrunInActionましたし、フィルタリングされたリストを返すために計算も試みましたが、うまくいかないようです。

mobXでこれを行う正しい方法は何ですか?