从 reducer 获取数据到 FlatList 组件

Question

我的代码可以正常工作，但我不明白 "library" 和 library.id 在 keyExtractor 中是如何工作的。 library.id 如何从 "libraries" reducer 获取项目的 ID？

而且 renderItem(library) 中的 "library" 和 keyExtractor 中的 "library" 是否相同？

如果有人能尽快解释一下，我将不胜感激。

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {
  renderItem(library) {
    return <ListItem library={library} />;
  }

  render() {
    return (
      <FlatList
        data={this.props.libraries}
        renderItem={this.renderItem}
        keyExtractor={library => library.id}
      />
    );
  }
}

const mapStateToProps = state => {
  return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList);

Answer 1

library（可以任意命名）在你的 renderItem 来自你数据={this.props.libraries}

renderItem(library) {
  return <ListItem library={library} />;
}

this.props.libraries 来自 redux

- the key name `libraries` can be named anything other than `libraries`
- state.libraries is coming from your redux reducer (check your root reducer)

const mapStateToProps = state => {
  return { libraries: state.libraries };
};

这是从来自 data={this.props.libraries}

的数据中提取密钥 ID

keyExtractor={library => library.id}

从 reducer 获取数据到 FlatList 组件

Getting data from reducer into FlatList component

reducers

react-native

react-native-flatlist