ListItem не перерисовывается в FlatList при изменении наблюдаемого массива - PullRequest
Новая
       19

ListItem не перерисовывается в FlatList при изменении наблюдаемого массива

0 голосов
/ 22 февраля 2019

У меня есть компонент с именем 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 получать обновленные реквизиты всякий раз, когда элементы списка изменяются и перерисовываются?

1 Ответ

0 голосов
/ 22 февраля 2019

Я обнаружил, что мой ответ - это второй ответ здесь: Реакция привязки Native mobx к FlatList не работает .Добавление Observer вокруг CheckListItem сделало так, чтобы '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>
    );
}
...