Question

我有一个带有两个TextInputs的组件。在每个TextInput下，都有一个FlatList，当用户键入某些字符时会渲染该FlatList（实际的渲染发生在ListItem中，React-native元素中的模块）。对于第一个FlatList，一切正常-可以按预期呈现。问题出在第二个FlatList上-我无法渲染它。查看此gif以了解我的意思：https://gph.is/g/E1G1jnx

我已经尝试按照One of two FlatLists not rendering items in same component的建议使用“ extraData”道具，但是并不能解决问题。

我知道问题不在于onChangeAddress（address）是一个异步函数。我使用了静态数据集，但仍然无法渲染。

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

任何帮助将不胜感激！

Answer 1

问题在于数据的结构化以呈现第二个平面列表的项目：

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

({ addressItem, index }) <-这里没有addressItem。您必须用item替换它，因为Flatlist提供了一个{ item: Object, index: Number, separators: object }结构的对象作为renderList回调的参数。

数据未显示在同一组件的两个FlatList之一中

1 个答案: