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

Question

我有一个包含两个 TextInput 的组件。在每个 TextInput 下，都有一个 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 之一中

Data not being displayed in one of two FlatLists in the same component

listitem

react-native

react-native-flatlist