ReactNative — FlatList не обновляется до прокрутки

У меня проблема с компонентом FlatList, который не обновляется до прокрутки.

введите здесь описание изображения

Я попытался добавить журнал в renderItem и keyExtractor, оба метода вызывались с правильными данными, но список не обновлялся.

Вот метод рендеринга:

render() {

    const messages = this.props.messages
    const message = this.props.message

    return (
        <View style={[styles.container]}>
            <FlatList
                ref={"flatList"}
                contentContainerStyle={styles.list}
                data={messages}
                renderItem={(listItem) => {
                    return <MessageBuble message={listItem.item}/>
                }}
                keyExtractor={(item: Message) => {
                    return item.id
                }}
            />

            <View style={[styles.textInputContainer]}>
                <TextInput
                    style={styles.textInput}
                    value={message}
                    multiline={true}
                    onChangeText={this.props.messageChanged}
                />
                <Button title={"Odeslat"} onPress={() => {
                    if (this.props.sendMessage) {
                        this.props.sendMessage(this.props.message)
                    }
                }}/>
            </View>
        </View>
    )
}

person JaSHin    schedule 06.05.2018    source источник
comment
Каким навигатором пользуетесь? Попробуйте установить removeClippedSubviews={false}   -  person Pritish Vaidya    schedule 07.05.2018
comment
Я использую StackNavigator из библиотеки react-navigation, и removeClippedSubviews мне не помогает.   -  person JaSHin    schedule 07.05.2018


Ответы (1)


Добавьте дополнительные данные в FlatList и повторите попытку.

<FlatList
    extraData={this.props}
    ....
person sharad_kalya    schedule 06.05.2018
comment
Большой! Тогда вы принимаете ответ :) . Он работает, поскольку FlatList не выполняет повторный рендеринг при изменении состояния или реквизита. Но если мы хотим повторно отобразить FlatList, нам нужно передать ему свойство extraData. В случае, если бы это зависело от состояния, вы бы передали extraData={this.state} - person sharad_kalya; 07.05.2018
comment
В документации сказано: If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop . но в моем случае свойство data меняется всегда. - person JaSHin; 07.05.2018
comment
Документы для FlatList говорят, что это PureComponent, что означает, что он не будет повторно рендериться, если реквизиты останутся неглубокими. Убедитесь, что все, от чего зависит ваша функция renderItem, передается как реквизит, который не === после обновлений, иначе ваш пользовательский интерфейс может не обновляться при изменениях. Это включает в себя свойство данных и состояние родительского компонента. - person sharad_kalya; 07.05.2018
comment
Также вы можете передать extraData={messages} только в том случае, если ваш renderItem не зависит от какого-либо другого состояния или реквизита. Но в целом это не так, поскольку мы используем многие вещи, включенные в наше состояние/реквизиты в нашем renderItem. - person sharad_kalya; 07.05.2018
comment
extraData={messages} или extraData={this.props.messages} не работают - person JaSHin; 07.05.2018