firebase - 如何通过 FlatList 将键传递到它的 renderItem 中?

标签 firebase react-native expo

我的 React native 应用程序上有一个提要屏幕,它有一个列表组件:

<List
    refreshControl={
        <RefreshControl
            tintColor={'#E4E4E4'}
            refreshing={this.state.loading}
            onRefresh={this._onRefresh}
        />
    }
    onPressFooter={this.onEndReached}
    data={this.state.posts}
/>

...从作为 FlatList 组件的 List.js 导入:

class List extends React.Component {
    renderItem = ({ item }) => <Item {...item} />;
    keyExtractor = item => item.key;

    render() {
        const { ...props } = this.props;
        return (
            <FlatList
                ref={(ref) => { this.listRef = ref; }}
                keyExtractor={this.keyExtractor}
                renderItem={this.renderItem}
                ListFooterComponent={footerProps => (
                    <Footer {...props} />
                )}
                showsVerticalScrollIndicator={false}
                {...props}
            />
        );
    }

在 List.js 的 this.props 中,我可以访问 this.props.key,这是我的 Firebase 数据库中一行的键,但我无法访问 renderItem 中的那个键。在 Item.js 中,我只能访问存储在该行中的数据,而不能访问行唯一键。

如何访问 Item.js 中的那个 key ?我想我只是错误地传递了值?

最佳答案

想通了,那是愚蠢的。我认为这是 keyExtractor 的结果,但我仍然可以单独传递 key ,例如...

renderItem({item}) {
    return (
        <Item
            _key={item.key}
            {...item}
        />
    )
}

关于firebase - 如何通过 FlatList 将键传递到它的 renderItem 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56479950/

相关文章:

javascript - 在 FireStore 中过滤集合组查询

javascript - 为什么事件没有通过?

android - react js createRef() 返回未定义

javascript - 'info' 和 'history' 在tensorflow.js的模型中未定义

javascript - 按钮没有出现

typescript - 火力地堡错误 : [code=permission-denied]: Missing or insufficient permissions

firebase - 在 Angular 中(使用 angularfire2 和 typescript),如何获取使用 firestore 时抛出的错误的类型?

java - 为什么 Cloud Firestore 数据库中的文档未被删除?

ios - 文本输入 View 无法正确呈现

android - 尝试在真实手机上启动应用程序时,Expo 卡在无休止的加载屏幕上