当可观察的阵列更改时，ListItem不会在flatlist中重新读取

Question

我的组件称为ChardListItem，其中包含：

<ListItem
    leftAvatar={this.props.leftAvatar}
    title={this.props.title}
    leftIcon={this.state.icon}
       onPress={(event) => {
          this.props.onSelect();
       }}
    containerStyle={{ backgroundColor: this.state.color }}
    switch={{ value: this.props.isSelected, disabled: true }} // <-- this switch
/>

我将其导出为观察者：

export default (observer(CheckListItem));

并从我所谓的countrypage中使用它：

render() {
    console.log(toJS(this.props.store.countries)); // <-- prints the expected updated list
    return (
        <View style={{ flex: 1 }}>
            <Text>{this.state.ouputText}</Text>
            <FlatList
                data={this.props.store.countries}
                renderItem={({ item }) =>
                    <CheckListItem
                    title={item.name}
                    leftAvatar={{ source: { uri: item.flag } }}
                    onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
                    isSelected={item.isSelected} //<-- won't update
                    />
                }
            />
        </View>
    );
}

i注入我的商店，这是SearchParameters的单例实例

export default inject('store')(observer(CountryPage));

每当我获取搜索参数实例并更改列表中的任何属性（isSelected）时。countrypage rerenders并记录预期的更新列表。我的问题是，这不要更新清单 - 并将其重新注册。每当列表元素更改和rerender时，如何使我的清单组件接收更新的道具？

Answer 1

我发现我的答案是这里的第二个答案：反应本机MOBX与flatlist绑定不起作用。在清单周围添加观察者，使" ISSELECTED"传递到了下来，从而更新了开关。

render() {
    console.log(toJS(this.props.store.countries));
    return (
        <View style={{ flex: 1 }}>
            <Text>{this.state.ouputText}</Text>
            <FlatList
                data={this.props.store.countries}
                renderItem={({ item }) =>
                    <Observer>
                        {() => 
                        <CheckListItem
                        title={item.name}
                        leftAvatar={{ source: { uri: item.flag } }}
                        onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
                        isSelected={item.isSelected}
                        />
                        }
                    </Observer>
                    }
            />
        </View>
    );
}