当可观察数组更改时，ListItem不会在FlatList中重新呈现

Question

我有一个名为CheckListItem的组件，它包含：

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

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

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

每当我获得我的SearchParameters实例并更改驻留在那里的列表（isSelected）中的任何属性。 CountryPage重新呈现并记录预期的更新列表。我的问题是，这不会更新CheckListItem - 并重新呈现它。每当列表元素更改并重新呈现时，如何使我的CheckListItem组件接收更新的props？

Answer 1

我发现我的答案是第二个答案：React Native mobx binding to FlatList not working。在CheckListItem周围添加Observer使得'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>
    );
}