Lodash _.reduce 在 React Native 中无法识别

Question

我不确定这是否是我的错误，因为我找不到我使用的代码与文档和视频中的代码之间的任何区别。

我有一段代码使用SectionList来显示使用lodash的groupBy和reduce方法排列并打包到数组中的数据。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  ScrollView,
  Button,
  Picker,
  SectionList
} from 'react-native';

import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import { SearchBar } from 'react-native-elements';
import _ from 'lodash'; 



type Props = {};

export default class App extends Component<Props> {

  constructor(props) {
    super(props);
    this.findNearestBranch = this.findNearestBranch.bind(this);
    this.displayDirections = this.displayDirections.bind(this);
    this.displayUserLocationPin = this.displayUserLocationPin.bind(this);
    this.calculateNearestBranch = this.calculateNearestBranch.bind(this);
  }

  state = {
   ...
    branchArray: [
      {branchId: 12, name: "Main SSNIT Branch", description: "Where the big boys work", latitude:  5.559971399999999, longitude:-0.2002176999999392, region: "Northern Region" },
      {branchIdid: 52, name: "Aother smaller branch", description: "Where the small boys work", latitude:  6.559971399999999, longitude:-0.2002176999999392, region: "Eastern Region" }, 
      {branchId: 78, name: "Yet another random branch", description: "Where the crazy girls work", latitude:  7.059971399999999, longitude:-0.2002176999999392, region: "Northern Region" }, 
      {branchId: 96, name: "This isn't a branch. It's a twig", description: "Where the strange people play", latitude:  6.859971399999999, longitude:-0.2002176999999392, region: "Western Region" }
     ]
  }

  render() {

    return (
      <ScrollView contentContainerStyle={styles.container} >   

     ...


      <SectionList
        renderItem={this.renderBranchItem}
        renderSectionHeader={this.renderBranchHeader}
        sections={this.getBranchesForList}
        keyExtractor = {(item) => item.branchId}
      />

      </ScrollView>

    );
  }

  renderBranchItem = (branchItem) =>{
    return <View style={{borderBottomWidth:StyleSheet.hairlineWidth}}>
            <Text style={{fontSize:20, fontWeight:"bold"}}> {branchItem.item.name} </Text>
            <Text style={{fontSize:15,}}> {branchItem.item.description} </Text>
            <Text style={{fontSize:15,}}> {branchItem.item.longitude}, {branchItem.item.latitude}</Text>
            </View>
  }

  renderBranchHeader = (header) =>{
    return <View style={{borderBottomWidth:StyleSheet.hairlineWidth}}>
            <Header style={{fontWeight:"bold"}} title={header.section.region} />
            </View>
  }

  getBranchesForList = () =>{

    //Making an object containing the branches sorted by region {region: [branch1, branch2], region2: [branch 2, branch 4]}
    let sortedBranchesObject = _.groupBy(this.state.branchArray, branch => branch.region);

    //Now making that Object an array of structure [{data: [], region: "region"}, {...}]
    let letsortedBranchesArray = _.reduce(sortedBranchesObject, (accumulatingArray, nextValue, nextKey)=>{
      accumulatingArray.push({
        data: nextValue,
        region: nextKey
      });
      return accumulatingArray;
    }, []);

    return sortedBranchesArray;
  }

}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    height:400, 
    width: 400, 

  }
});

但是，由于某种原因，_.reduce 在getBranchesForList 中未被识别为函数。这是错误日志的图片：

我在这里做错了吗？老实说，我不确定。我发布了一个 GitHub issue 关于它，但我得到的唯一答案是我对 _ 的引用可能已经改变。不过，我找不到任何证据表明这种事情正在发生。

Answer 1

您的问题与lodash.reduce 无关。这是关于您的 sections 不是 SectionList 期望的数组。

部分数组

Docs.

<SectionList
    renderItem={this.renderBranchItem}
    renderSectionHeader={this.renderBranchHeader}
    sections={this.getBranchesForList()} // NB call
    keyExtractor = {(item) => item.branchId}
  />