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

【问题标题】：Data not being displayed in one of two FlatLists in the same component数据未显示在同一组件的两个 FlatList 之一中
【发布时间】：2023-03-09 15:02:01
【问题描述】：

我有一个带有两个 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>
    );
  }

任何帮助将不胜感激！

【问题讨论】：

认为你可以制作一个可重现的Expo Snack？
@iuliu.net，请在snack.expo.io/@narcis/jobzy找到世博小吃。

标签： react-native react-native-flatlist listitem

【解决方案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 回调的参数。

【讨论】：