Question

我的代码正在运行，但是我不了解keyExtractor中的“ library”和library.id是如何工作的。 library.id如何从“ libraries” reduce中获取项目的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

renderItem中的

library（可以命名为任何东西）来自您的 data = {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组件

1 个答案: