Node.js TypeError:异常数据为空

我设法使Watson Discovery API正常工作。但是，当我在UI搜索字段中输入搜索字符串并按enter键时，我收到以下错误：

TypeError: anomalyData is null
hasAnomalies
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/AnomalyDetection/index.jsx:41

  38 | }
  39 | 
  40 | static hasAnomalies(anomalyData) {
> 41 |   return anomalyData.some(result => result.anomaly);
     | ^  42 | }
  43 | 
  44 | static propTypes = {

AnomalyDetection
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/AnomalyDetection/index.jsx:64

  61 | 
  62 | state = {
  63 |   showQuery: false,
> 64 |   showOverlay: !AnomalyDetection.hasAnomalies(this.props.anomalyData),
     | ^  65 | };
  66 | 
  67 | onShowQuery = () => {

Demo/this.fetchNewData/</<
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/demo.jsx:101

   98 | }).then(response => {
   99 |   if (response.ok) {
  100 |     response.json().then(json => {
> 101 |       this.setState({ loading: false, data: parseQueryResults(json) });
      | ^  102 |     });
  103 |   } else {
  104 |     response

promise callback*Demo/this.fetchNewData/<
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/demo.jsx:100

   97 |   body: JSON.stringify(query),
   98 | }).then(response => {
   99 |   if (response.ok) {
> 100 |     response.json().then(json => {
      | ^  101 |       this.setState({ loading: false, data: parseQueryResults(json) });
  102 |     });
  103 |   } else {

TypeError:异常数据为空
有异常
C:/technology/WatsonDiscovery/WatsonDiscovery ui/discovery nodejs/src/AnomalyDetection/index.jsx:41
38 | }
39 | 
40 |静态异常（异常数据）{
>41 |返回异常数据.some（result=>result.normal）；
| ^  42 | }
43 | 
44 |静态支撑类型={
异常检测
C:/technology/WatsonDiscovery/WatsonDiscovery ui/discovery nodejs/src/AnomalyDetection/index.jsx:64
61 | 
62 |状态={
63 | showQuery:false，
>64 | showOverlay:！异常检测。具有异常（this.props.anomalyData），
| ^  65 | };
66 | 
67 | onShowQuery=（）=>{
Demo/this.fetchNewData/{
99 |如果（回答：ok）{
100 | response.json（）。然后（json=>{
>101 | this.setState（{加载：false，数据：parseQueryResults（json）}）；
| ^  102 |     });
103 |}其他{
104 |响应
承诺回调*Demo/this.fetchNewData/<
C:/technology/WatsonDiscovery/WatsonDiscovery ui/discovery nodejs/src/demo.jsx:100
97 | body:JSON.stringify（查询），
然后（响应=>{
99 |如果（回答：ok）{
>100 | response.json（）。然后（json=>{
|^101 | this.setState（{加载：false，数据：parseQueryResults（json）}）；
102 |     });
103 |}其他{

discovery nodejs/src/anomalydection/index.jsx具有以下代码：

import React, { Component } from 'react';
import classNames from 'classnames';
import { string, number, shape, arrayOf } from 'prop-types';
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ComposedChart,
} from 'recharts';
import moment from 'moment';
import WidgetHeader from '../WidgetHeader/index';
import QuerySyntax from '../QuerySyntax/index';
import NoContent from '../NoContent/index';
import AnomalyDot from './AnomalyDot';
import AnomalyTooltip from './AnomalyTooltip';
import NoAnomaliesOverlay from './NoAnomaliesOverlay';
import queryBuilder from '../query-builder';

export default class AnomalyDetection extends Component {
  static widgetTitle() {
    return 'Anomaly Detection';
  }

  static widgetDescription() {
    return 'Anomalies - days with an unusually high number of mentions - can be detected in news articles over a specified timeframe.';
  }

  static formatDate(date) {
    return moment(date).format('MM/DD');
  }

  static hasAnomaly(payload) {
    return payload && payload.anomaly;
  }

  static hasAnomalies(anomalyData) {
    return anomalyData.some(result => result.anomaly);
  }

  static propTypes = {
    anomalyData: arrayOf(
      shape({
        key_as_string: string.isRequired,
        matching_results: number.isRequired,
        anomaly: number,
      })
    ).isRequired,
    query: shape({
      text: string.isRequired,
    }).isRequired,
    colorLine: string.isRequired,
  };

  static defaultProps = {
    colorLine: '#00a78f',
  };

  state = {
    showQuery: false,
    showOverlay: !AnomalyDetection.hasAnomalies(this.props.anomalyData),
  };

  onShowQuery = () => {
    this.setState({ showQuery: true });
  };

  onShowResults = () => {
    this.setState({ showQuery: false });
  };

  handleViewData = () => {
    this.setState({ showOverlay: false });
  };

  render() {
    const { query, anomalyData, colorLine } = this.props;
    return (
      <div>
        {!this.state.showQuery ? (
          <div className="anomaly-detection widget">
            <WidgetHeader
              title={AnomalyDetection.widgetTitle()}
              description={AnomalyDetection.widgetDescription()}
              onShowQuery={this.onShowQuery}
            />
            {anomalyData.length > 0 ? (
              <div className="anomaly-chart-container--div">
                <ResponsiveContainer height={250}>
                  <LineChart
                    data={anomalyData}
                    className={classNames('anomaly-chart--svg', {
                      faded: this.state.showOverlay,
                    })}
                    margin={{
                      ...ComposedChart.defaultProps.margin,
                      top: 15,
                      right: 15,
                    }}
                  >
                    <Line
                      type="linear"
                      dataKey="matching_results"
                      name="Matching Results"
                      stroke={colorLine}
                      strokeWidth="3"
                      dot={<AnomalyDot />}
                      activeDot={<AnomalyDot active />}
                    />
                    <CartesianGrid stroke="#ccc" />
                    <XAxis
                      dataKey="key_as_string"
                      tickFormatter={AnomalyDetection.formatDate}
                      tickLine={false}
                    />
                    <YAxis domain={['auto', 'auto']} tickLine={false} />
                    <Tooltip
                      labelFormatter={AnomalyDetection.formatDate}
                      content={<AnomalyTooltip />}
                    />
                  </LineChart>
                </ResponsiveContainer>
                {this.state.showOverlay && (
                  <NoAnomaliesOverlay text={query.text} onViewData={this.handleViewData} />
                )}
              </div>
            ) : (
              <NoContent query={query} message="There are no analytics available for your query." />
            )}
          </div>
        ) : (
          <QuerySyntax
            title={AnomalyDetection.widgetTitle()}
            query={queryBuilder.build(query, queryBuilder.widgetQueries.anomalyDetection)}
            response={{ results: anomalyData }}
            onGoBack={this.onShowResults}
          />
        )}
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“道具类型”导入{string，number，shape，arrayOf}；
进口{
响应容器，
线条图，
行,，
XAxis，
亚克斯，
CartesianGrid，
工具提示，
组合图，
}来自‘雷查特’；
从“力矩”中导入力矩；
从“../WidgetHeader/index”导入WidgetHeader；
从“../QuerySyntax/index”导入QuerySyntax；
从“../NoContent/index”导入NoContent；
从“./AnomalyDot”导入AnomalyDot；
从“./AnomalyTooltip”导入AnomalyTooltip；
从“/NoAnomaliesOverlay”导入NoAnomaliesOverlay；
从“../query builder”导入queryBuilder；
导出默认类异常检测扩展组件{
静态widgettile（）{
返回“异常检测”；
}
静态widgetDescription（）{
return“在特定的时间段内，可以在新闻文章中检测到异常情况，即在几天内被提及的次数异常多。”；
}
静态格式化日期（日期）{
返回时刻（日期）。格式（“MM/DD”）；
}
静态负载异常（有效负载）{
返回有效载荷和有效载荷异常；
}
静态异常（异常数据）{
返回anomalyData.some（result=>result.normal）；
}
静态类型={
异常水母(
形状({
键作为字符串：string.isRequired，
匹配结果：number.isRequired，
异常：数字，
})
).要求，
查询：形状({
text:string.isRequired，
}).要求，
颜色线：string.isRequired，
};
静态defaultProps={
颜色线：“#00a78f”，
};
状态={
showQuery:false，
showOverlay:！AnomalyDetection.hasExchanges（this.props.anomalyData），
};
onShowQuery=（）=>{
this.setState（{showQuery:true}）；
};
onShowResults=（）=>{
this.setState（{showQuery:false}）；
};
handleViewData=（）=>{
this.setState（{showOverlay:false}）；
};
render（）{
const{query，anomalyData，colorLine}=this.props；
返回(
{！this.state.showQuery(
{anomalyData.length>0(
{this.state.showOverlay&&(
)}
) : (
)}
) : (
)}
);
}
}

我确实搜索了此错误。找不到解决方案。如能帮助修复此错误，将不胜感激

谢谢

---

R

我建议您初始化构造函数内的状态：constructor（）{this.state={showQuery:false，showOverlay:！AnomalyDetection.hasnegories（this.props.anomalyData），}；}您确定组件正确接收到异常数据道具吗？谢谢@lissettdm。此演示来自IBM GitHub。我将nodeJs更新到当前版本并成功编译。现在我尝试了您的解决方案：在Index.jsx

constructor（）{This.state={showQuery:false，showOverlay:！AnomalyDetection.hasson（this.props.anomalyData），}；}

我收到了以下警告：

/src/AnomalyDetection/index.jsx第69:5行：“this”不允许出现在“super（）”之前不允许出现在“super（）”之前不允许出现在“super（）”之前不允许出现在“super”之前不允许出现在“super”

嗨，是的，只需在构造函数（）中添加super（）{super（）；…}谢谢@lissettdm。我现在遇到了一个不同的错误。

TypeError:this.props是未定义的异常检测C:/technology/WatsonDiscovery/WatsonDiscovery ui/discovery nodejs/src/anomalydection/index.jsx:72 69 | super（）；70 | this.state={71 | showQuery false，>72 | showOverlay:！异常检测（this.props.anomalyData），|^73 |}；74 |}75 |