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组件接收更新的道具？

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

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

1 个答案: