Получение данных из редуктора в компонент FlatList

Question

Мой код работает, но я не понимаю, как «library» и library.id работают в keyExtractor.Как library.id получает идентификатор элементов из редуктора «library»?

А также «library» в renderItem (library) и «library» в keyExtractor одинаковы?

Буду признателен, еслиКто-нибудь может коротко объяснить это.

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 исходит от избыточного числа

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

keyExtractor={library => library.id}