mobX - 過濾國家的反應原生？

Question

我有一個包含3個國家/地區的數組和一個文本輸入來過濾它們。 如果您輸入文本輸入，則應根據國家/地區名稱檢查您鍵入的內容，該國家/地區名稱應返回與篩選文本匹配的新篩選國家/地區列表。 它還應該在Typed Text:旁邊顯示輸入的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中執行此操作的正確方法是什么？

Answer 1

我看到了一些可能的問題，所以我略微改變了方法。

工作實例

更新的 工作示例 。 請注意，這在react-native未經測試，但應該可以正常工作。

代碼

@observer
class Country extends React.Component {


    @observable filterTermValue = '';
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    @computed get filtered() {
      let filteredList = this.countriesList.filter(
        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
      );
      if (filteredList.length)
        return filteredList;
      return this.countriesList;
    }

    render() {
        return (
          <div>
              Term: <input placeholder="Start typing country"
                 onKeyUp={this.onChangeFilterTerm} />

              {this.filtered.map(country =>
                  <div key={country.slug}>
                    <p>{country.name}</p>
                  </div>
              )}
          </div>
        )
    }

    @action onChangeFilterTerm = value => {
        this.filterTermValue = value.toLowerCase();
    }
}

React-native gotchyas

使用onChangeText正確簽名

JSX：

    <input placeholder="Start typing country"
            onKeyUp={this.onChangeFilterTerm} />

JS：

    @action onChangeFilterTerm = value => {
        this.filterTermValue = value.toLowerCase();
    }

使用mobx-react/native

如果它還沒有工作，我會仔細檢查一下：

別：

import {observer} from 'mobx-react';

做：

import {observer} from 'mobx-react/native';