Как немедленно обновить визуализированные элементы плоского / секционного списка React Native - PullRequest
Новая
       53

Как немедленно обновить визуализированные элементы плоского / секционного списка React Native

0 голосов
/ 05 февраля 2020

Я создаю ContactListScreen. Непосредственный дочерний элемент ContactListScreen - ContactItems, а ContactItems - это раздел списка, который отображает каждый ContactItem. Но проблема возникает, так как мой ContactItems должен быть мульти-выбираемым.

Я передал массив selectedContacts из моего состояния в каждый ContactItem. Логика c, которую я здесь использовал, ContactItem проверяет, равна ли длина selectedContacts 0 или нет. Если длина равна нулю, он не должен отображать selectItemView, если я выбираю элемент, он должен превратить себя sh в selectedContacts с помощью обратного вызова. Но проблема в том, что дочерние компоненты (ContactItem) не обновляются, пока я не выбрал отмену выбора элемента дважды или трижды. Как я могу заставить это работать?

Часть ContactList.tsx 

class ContactList extends Component {
    this.state = {
            loading: false,
            error: null,
            data: [],
            selectedItems: []
        };

    handleSelectionPress = (item) => {
        this.setState(prevState => {
            const { selectedItems } = prevState;
            const isSelected = selectedItems.includes(item);
            return {
                selectedItems: isSelected
                    ? selectedItems.filter(title => title !== item)
                    : [item, ...selectedItems],
            };
        });
    };

    renderItem(item: any) {
        return <ContactItem item={item.item}
                isSelected={this.state.selectedItems.includes(item.item)}
                onPress={this.handleSelectionPress}
                selectedItems={this.state.selectedItems}
               />;
    }

    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={this.state.data}
                    keyExtractor={(item, index) => item.id}
                    renderItem={this.renderItem.bind(this)}
                    renderSectionHeader={({section}) => (
                        section.data.length > 0 ?
                            <Text>
                                {section.title}
                            </Text> : (null)
                    )}
                />
            </View>
        );
    }

}

Часть ContactItem.tsx 

class ContactItem extend Component {
     render() {
        const checkBox = <TouchableOpacity onPress={() => {
            this.props.onPress(this.props.item)
        }
        } style={this.props.selectedItems.length > 0 && {display: 'none'}}>
            {!this.props.isSelected ?
                <View style={{borderRadius: 10, height: 20, width: 20, borderColor: "#f0f", borderWidth: 1}}>
                </View> : <View style={{
                    borderRadius: 10,
                    height: 20,
                    width: 20,
                    borderColor: "#f0f",
                    borderWidth: 1,
                    backgroundColor: "#f0f"
                }}>
                </View>}

        </TouchableOpacity>
        return (
            <View style={this.styles.contactsContainer}>
                <TouchableOpacity
                    onLongPress={() => this.props.onPress(this.props.item)}>
                    <View style={this.styles.contactInfo}>
                        {checkBox}
                    </View>
                </TouchableOpacity>
            </View>
        );
}

Примечание: Функциональное Компоненты не используются там, где я работаю.

1 Ответ

0 голосов
/ 07 февраля 2020

Я не уверен на 100% в этом, но у меня есть ощущение, что проблема в том, что компонент SectionList не запускает своего обновления, потому что предоставленное свойство sections={this.state.data} никогда не изменяется.

Самый простой способ справиться с этим - добавить свойство selectedItems как extraData в список разделов: 

 <SectionList
     sections={this.state.data}
     extraData={this.state.selectedItems}
     //...
...