Javascript 未捕获引用错误：未定义React，但组件中没有问题

wassup乡亲们

我从名为“SearchReactTableContainer”的组件中得到以下错误。我看了看里面，但很多人觉得一切都很好。有没有办法解决这个问题？我调查了网络状况，结果查询中所需的数据毫无问题地提供给了我的前端

SearchReactTableContainer.js

import React, { Component, Fragment } from "react";
import { has, isNil } from "ramda";

import CockpitSearchInput from "@components/SearchInput";
import SearchReactTable from "@cockpitComponents/SearchReactTable";
import {
  MY_CASES_FILTER_KEY,
  UNASSIGNED_FILTER_KEY
} from "@modules/CaseManager/CaseManagerDashboard/constants";
import { Col, Row } from "antd";

// TODO: TO BE REMOVED
const pagesCount = 3855;

export default class SearchReactTableContainer extends Component {
  constructor(props) {
    super(props);
    const { limit, searchValue } = this.props;
    const orMyCases = localStorage.getItem(MY_CASES_FILTER_KEY);
    const orUnassignedCases = localStorage.getItem(UNASSIGNED_FILTER_KEY);
    this.state = {
      loading: false,
      searchValue: searchValue || "",
      data: [],
      pageSize: limit,
      pagesCount,
      orMyCases: this.parseNonNullValue(orMyCases),
      orUnassignedCases: this.parseNonNullValue(orUnassignedCases)
    };

    this.triggerFetchMore = this.triggerFetchMore.bind(this);
  }

  parseNonNullValue(value) {
    try {
      return !isNil(value) ? JSON.parse(value) : true;
    } catch (err) {
      console.error(err);
      return false;
    }
  }

  async fetchMoreFromGraphql(fetchMore, variables, tableKey) {
    return await fetchMore({
      variables,
      updateQuery: (previousResult, { fetchMoreResult }) => {
        if (!fetchMoreResult || !previousResult) return previousResult;
        if (!(tableKey in previousResult)) {
          return [];
        }
        return {
          ...previousResult,
          ...fetchMoreResult[tableKey]
        };
      }
    });
  }

  async onFetchDataHandler(state) {
    const { page, pageSize, sorted, filtered } = state;
    const { tableKey, fetchMore } = this.props;
    const { searchValue, orMyCases, orUnassignedCases } = this.state;
    this.changeTableLoadingState();
    const response = await this.fetchMoreFromGraphql(
      fetchMore,
      {
        searchValue,
        offset: page * pageSize,
        limit: pageSize,
        page,
        pageSize,
        sorted,
        filtered,
        filters: {
          orMyCases,
          orUnassignedCases
        }
      },
      tableKey
    );
    let { data } = response;
    const pagesCount =
      searchValue.length === 0
        ? has("totalCount", data[tableKey])
        ? Math.ceil(data[tableKey].totalCount / pageSize)
        : has("items", data[tableKey])
          ? Math.ceil(data[tableKey].items.length / pageSize)
          : Math.ceil(data[tableKey].length / pageSize)
        : this.state.pagesCount;
    this.setState({
      ...this.state,
      loading: false,
      data: data[tableKey].items ? data[tableKey].items : data[tableKey],
      pageIndex: page,
      pageSize,
      pagesCount
    });
  }

  async triggerFetchMore(searchValue = "") {
    const { tableKey, fetchMore, tableName } = this.props;
    const { orMyCases, orUnassignedCases } = this.state;
    this.changeTableLoadingState();
    const variables = {
      searchValue,
      offset: 0,
      limit: this.state.pageSize,
      filters: {
        orMyCases,
        orUnassignedCases
      }
    };
    const response = await this.fetchMoreFromGraphql(fetchMore, variables, tableKey);
    const { data } = response;
    try {
      await this.setState(prevState => {
        const { pageSize } = prevState;
        const pagesCount =
          searchValue.length === 0
            ? has("totalCount", data[tableKey])
            ? Math.ceil(data[tableKey].totalCount / pageSize)
            : has("items", data[tableKey])
              ? Math.ceil(data[tableKey].items.length / pageSize)
              : Math.ceil(data[tableKey].length / pageSize)
            : this.state.pagesCount;
        prevState = {
          ...prevState,
          loading: false,
          data: data[tableKey].items ? data[tableKey].items : data[tableKey],
          searchValue,
          pagesCount
        };
        return prevState;
      });
      localStorage.setItem(`${tableName}.searchValue`, searchValue);
    } catch (err) {
      console.log(err);
    }
  }

  changeTableLoadingState() {
    this.setState({ loading: !this.state.loading });
  }

  render() {
    const {
      columns,
      dataFormatter,
      search = true,
      defaultSorted,
      filterBlock
    } = this.props;
    const { data, pagesCount, pagesSize, loading, searchValue } = this.state;
    let formattedData = data;
    if (typeof dataFormatter === "function") {
      formattedData = dataFormatter(data);
    }
    return (
      <Fragment>
        {search && (
          <Row>
            <Col span={6}>
              <CockpitSearchInput
                onChange={this.triggerFetchMore}
                initialValue={searchValue}
              />
            </Col>
          </Row>
        )}
        {!isNil(filterBlock) && filterBlock(this)}
        <SearchReactTable
          {...this.props}
          manual
          data={formattedData}
          columns={columns}
          loading={loading}
          // Request new data when things change
          onFetchData={(state, instance) => this.onFetchDataHandler(state, instance)}
          pages={pagesCount} // Display the total number of pages
          pageSizeOptions={[5, 10, 20, 25, 50, 100]}
          defaultPageSize={pagesSize}
          className="table table-striped table-bordered table-hover"
          defaultSorted={defaultSorted}
        />
      </Fragment>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“ramda”导入{has，isNil}；
从“@components/SearchInput”导入搜索输入；
从“@cockpitComponents/SearchReactTable”导入SearchReactTable；
进口{
我的案例过滤键，
未分配的\u筛选器\u密钥
}来自“@modules/CaseManager/CaseManagerDashboard/constants”；
从“antd”导入{Col，Row}；
//待办事项：待删除
常数pagesunt=3855；
导出默认类SearchReactTableContainer扩展组件{
建造师（道具）{
超级（道具）；
const{limit，searchValue}=this.props；
const orMyCases=localStorage.getItem（我的案例过滤器密钥）；
const或unassignedcases=localStorage.getItem（未分配的筛选项）；
此.state={
加载：false，
searchValue:searchValue | |“”，
数据：[]，
页面大小：限制，
寻呼机，
orMyCases:this.parseNonNullValue（orMyCases），
orUnassignedCases:this.parseNonNullValue（orUnassignedCases）
};
this.triggerFetchMore=this.triggerFetchMore.bind（this）；
}
parseNonNullValue（值）{
试一试{
return！isNil（value）？JSON.parse（value）：true；
}捕捉（错误）{
控制台错误（err）；
返回false；
}
}
异步fetchMoreFromGraphql（fetchMore、变量、表键）{
返回等待获取更多({
变量，
updateQuery:（上一个结果，{fetchMoreResult}）=>{
如果（！fetchMoreResult | |！previousResult）返回previousResult；
如果（！（上一个结果中的表键））{
返回[]；
}
返回{
…以前的结果，
…获取更多结果[tableKey]
};
}
});
}
异步onFetchDataHandler（状态）{
const{page，pageSize，排序，筛选}=状态；
const{tableKey，fetchMore}=this.props；
const{searchValue，orMyCases，orUnassignedCases}=this.state；
this.changeTableLoadingState（）；
const response=wait this.fetchMoreFromGraphql(
费特莫尔，
{
搜索值，
偏移量：页面*页面大小，
限制：页面大小，
页
页面大小，
分类，
过滤，
过滤器：{
或者我的案子，
或未分配的案例
}
},
表键
);
设{data}=响应；
常数搜索=
searchValue.length==0
？有（“totalCount”，数据[表键]）
？Math.ceil（数据[tableKey].totalCount/pageSize）
：has（“items”，数据[tableKey]）
？Math.ceil（数据[tableKey].items.length/pageSize）
：Math.ceil（数据[tableKey].length/pageSize）
：this.state.pagesont；
这是我的国家({
…这个州，
加载：false，
数据：数据[tableKey]。项目？数据[tableKey]。项目：数据[tableKey]，
页面索引：第页，
页面大小，
寻呼机
});
}
异步triggerFetchMore（searchValue=“”）{
const{tableKey，fetchMore，tableName}=this.props；
const{orMyCases，orUnassignedCases}=this.state；
this.changeTableLoadingState（）；
常量变量={
搜索值，
偏移量：0，
限制：this.state.pageSize，
过滤器：{
或者我的案子，
或未分配的案例
}
};
const response=wait this.fetchMoreFromGraphql（fetchMore，variables，tableKey）；
const{data}=响应；
试一试{
等待此消息。设置状态（prevState=>{
const{pageSize}=prevState；
常数搜索=
searchValue.length==0
？有（“totalCount”，数据[表键]）
？Math.ceil（数据[tableKey].totalCount/pageSize）
：has（“items”，数据[tableKey]）
？Math.ceil（数据[tableKey].items.length/pageSize）
：Math.ceil（数据[tableKey].length/pageSize）
：this.state.pagesont；
prevState={
…国家，
加载：false，
数据：数据[tableKey]。项目？数据[tableKey]。项目：数据[tableKey]，
搜索值，
寻呼机
};
返回状态；
});
setItem（`${tableName}.searchValue`，searchValue）；
}捕捉（错误）{
控制台日志（err）；
}
}
changeTableLoadingState（）{
this.setState（{loading:！this.state.loading}）；
}
render（）{
常数{
柱，
数据格式化程序，
search=true，
默认排序，
过滤块
}=这是道具；
const{data，pagesCount，pagesize，load，searchValue}=this.state；
让formattedData=数据；
if（数据格式化程序的类型==“函数”）{
formattedData=数据格式化程序（数据）；
}
返回(
{搜索&&(
)}
{！isNil（filterBlock）&&filterBlock（this）}
this.onFetchDataHandler（状态，实例）}
pages={PageScont}//显示总页数
pageSizeOptions={[5,10,20,25,50,100]}
defaultPageSize={pagesSize}
className=“表格带条表格带边框表格悬停”
defaultSorted={defaultSorted}
/>
);
}
}

我将在“开发人员”选项卡中添加一个显示实际问题的屏幕截图

---

问题似乎来自

selectreactable

组件。您使用的是monolith架构还是来自npm注册表的软件包？您使用的是webpack吗？如果是，请确保配置正确。看起来React没有被加载/解析。@PrãtêkThápáYe，monolith体系结构。但是我通常从React库导入它。@Sujith这是唯一一个我得到此组件错误的页面