javascript - npm 编译错误 ('_' 未定义)

Question

我一直在更新我的 js 程序中的所有依赖项，但没有对我的任何组件进行任何更改。但是现在当我运行时

npm run build

我的其中一个组件出现错误:

Failed to compile.

./src/components/DonationSummaryComponent.js
  Line 14:  '_' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Itay\AppData\Roaming\npm-cache\_logs\2018-09-17T08_25_54_825Z-debug.log

我试过了

npm i lodash 

但这并没有解决问题。

这是错误所在的组件:

import React, { Component } from 'react';
import {Alert} from 'react-bootstrap';
import {MonthlyDonations} from './MonthlyDonationsComponent.js';


export class DonationSummary extends Component {
  render() {
    var monthsComponents = [];

    var monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];  

    if(this.props.yearData.length > 0){
      var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {
        return(monthNames[(new Date(dataEntry.donationDate)).getUTCMonth()]);
      });      

      for (var monthName in monthsdata) {
        if (monthsdata.hasOwnProperty(monthName)) {
          monthsComponents.push(<MonthlyDonations key={monthName+this.props.year} monthName={monthName} monthData={monthsdata[monthName]}/>);
        }
      }
    }
    else{
      monthsComponents.push(<Alert key="noDonations" bsStyle="info"> there are no donations to display </Alert> );
    }
    return(
      <div>
        {monthsComponents}
      </div>
    );
  }
}

错误所指的第14行是:

var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {

该错误可能与我将 react-bootstrap react 更新到最新版本 (16.5.0) 有关。两者都在该组件中使用。

Answer 1

你需要在你的组件中导入lodash库

PFB工作代码

import React, { Component } from 'react';
import {Alert} from 'react-bootstrap';
import {MonthlyDonations} from './MonthlyDonationsComponent.js';
import _ from 'lodash';

export class DonationSummary extends Component {
  render() {
    var monthsComponents = [];

    var monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];  

    if(this.props.yearData.length > 0){
      var monthsdata = _.groupBy(this.props.yearData, function(dataEntry) {
        return(monthNames[(new Date(dataEntry.donationDate)).getUTCMonth()]);
      });      

      for (var monthName in monthsdata) {
        if (monthsdata.hasOwnProperty(monthName)) {
          monthsComponents.push(<MonthlyDonations key={monthName+this.props.year} monthName={monthName} monthData={monthsdata[monthName]}/>);
        }
      }
    }
    else{
      monthsComponents.push(<Alert key="noDonations" bsStyle="info"> there are no donations to display </Alert> );
    }
    return(
      <div>
        {monthsComponents}
      </div>
    );
  }
}