Данные не отображаются в одном из двух плоских списков в одном и том же компоненте - PullRequest
Новая
       17

Данные не отображаются в одном из двух плоских списков в одном и том же компоненте

1 голос
/ 29 мая 2019

У меня есть компонент с двумя TextInputs. Под каждым TextInput есть FlatList, который визуализируется, когда пользователь вводит некоторые символы (фактический рендеринг происходит в ListItem, модуле из активных элементов). Для первого FlatList все работает нормально - он отображается так, как ожидалось. Проблема со вторым FlatList - я не могу заставить его визуализировать. Посмотрите этот рисунок, чтобы понять, что я имею в виду: https://gph.is/g/E1G1jnx

Я пытался использовать реквизит "extraData", как рекомендовано в Один из двух FlatLists не отображал элементы в одном и том же компоненте , но это не решило проблему.

Я знаю, что проблема не в том, что onChangeAddress (адрес) является асинхронной функцией. Я использовал статический набор данных, и все равно он не рендерился. 

import { StyleSheet, Text, TextInput, View, FlatList, ImageBackground, Image } from 'react-native';
import { ListItem, Button } from 'react-native-elements';

 class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            jobInputValue: '',
            addressInputValue: '',
            showJobsDropdown: false,
            showAddressesDropdown: false,
            jobsList: this.props.jobTitles.results,
            addressPredictions: []
     };
  }

async onChangeAddress(address) {
//fetch the data from the API
//filteredAddresses stores the data from the API
if (filteredAddresses.length > 0) {
            this.setState({
               addressPredictions: filteredAddresses,
               showAddressesDropdown: true
            })
        }
    }

}

  render() {
    return (
    <ImageBackground style={styles.bkgImage} source={require('../assets/homepage_background.jpg')}>
        <TextInput 
            style={styles.jobTextInput}
            value={this.state.jobInputValue}
            placeholder='Ce job cauți?'
            onChangeText={(jobInputValue) => this.setState({jobInputValue}, this.checkJobsDropdown(jobInputValue))}/>
                <FlatList
                data={this.state.jobsList}
                style={this.state.showJobsDropdown ? styles.jobsDropdownStyle : styles.dropdownHiddenStyle}
                renderItem={({ item }) => (
                    <ListItem
                        title={item}
                        containerStyle={{paddingBottom: -4}}
                        titleProps={{ style: styles.dropdownItemStyle}}
                        onPress={() => this.setState({jobInputValue: item}, this.hideJobsDropdown())}
                    />
                )}
                keyExtractor={item => item}
            />

        <TextInput 
            style={styles.addressTextInput}
            value={this.state.addressInputValue}
            placeholder='La ce adresă locuiești?'
            onChangeText={addressInputValue => this.onChangeAddress(addressInputValue)}
            />
//the issue is with the FlatList below
            <FlatList
                data={this.state.addressPredictions}
                extraData={this.state}
                style={this.state.showAddressesDropdown ? styles.addressDropdownStyle : styles.dropdownHiddenStyle}
                renderItem={({ addressItem, index }) => (
                    <ListItem
                        title={addressItem}
                        containerStyle={{paddingBottom: -4}}
                        titleProps={{style: styles.dropdownItemStyle}}
                        onPress={() => this.setState({addressInputValue: addressItem}, this.hideAddressesDropdown())}
                    />
                )}
                keyExtractor={(addressItem, index) => index.toString()}
            />
        <Button 
            title="CAUTĂ"
            type="outline"
            underlayColor={colors.red}
            titleStyle={styles.buttonTitleStyle}
            color={colors.red}
            style={styles.buttonStyle}
            onPress={this.printState}
            />

    </ImageBackground>
    );
  }

Любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 30 мая 2019

Проблема заключается в разрушении данных для рендеринга элементов вашего второго плоского списка: 

renderItem={({ addressItem, index }) => (
                <ListItem
                    title={addressItem}
                    containerStyle={{paddingBottom: -4}}
                    titleProps={{style: styles.dropdownItemStyle}}
                    onPress={() => this.setState({addressInputValue: addressItem}, this.hideAddressesDropdown())}
                />
            )}

({ addressItem, index }) <- здесь нет <code>addressItem. Вы должны заменить это на item, поскольку Flatlist предлагает объект со структурой { item: Object, index: Number, separators: object } в качестве параметра для вашего обратного вызова renderList.

...