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更新为最新版本（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>
    );
  }
}

Answer 2

您不会在组件中导入lodash。

您应该添加import _ from 'lodash';，它将起作用

Answer 3

您需要导入lodash库。

从“ lodash”导入_

我建议使用lodash.groupby，这也会减小捆绑包的大小。请安装此软件包并将其导入：

从'lodash.groupby'导入groupBy

然后使用：

var monthsdata = groupBy（this.props.yearData，function（dataEntry）{

npm编译错误（未定义“ _”）

3 个答案: