错误：元素类型无效：需要一个字符串（对于内置组件）reactjs

Posted 2023-02-21

【中文标题】错误：元素类型无效：需要一个字符串（对于内置组件）reactjs

【英文标题】：Error: Element type is invalid: expected a string (for built-in components) reactjs

【发布时间】：2020-11-12 16:33:24

【问题描述】：

我收到以下错误：

错误：元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 不明确的。您可能忘记从文件中导出组件 它是在其中定义的，或者您可能混淆了默认导入和命名导入。

检查Grid的渲染方法。

我的反应代码：

import React,  useState  from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import  Toolbar, Data  from "react-data-grid-addons";
import axios from 'axios';

const selectors = Data.Selectors;

const columns = [
   key: "MEMBER", name: "MEMBER", editable: true ,
   key: "ALIAS", name: "ALIAS", editable: true ,
   key: "STATUS", name: "STATUS", editable: true 
];

const handleFilterChange = filter => filters => 
  const newFilters =  ...filters ;
  if (filter.filterTerm) 
    newFilters[filter.column.key] = filter;
   else 
    delete newFilters[filter.column.key];
  
  return newFilters;
;

function getRows(rows, filters) 
  return selectors.getRows( rows, filters );


async function createRowData() 

  const response = await axios.get('/api/files/fileData/Allupdate.txt');  // returns an array of objects
  console.log(response)
  return response.data;



function Example( rows ) 
  console.log('rows', rows);        // I get this in console.log `rows Promise <pending>`

  const [filters, setFilters] = useState();
  const filteredRows = getRows(rows, filters);
  return (
    <ReactDataGrid
      columns=columns
      rowGetter=i => filteredRows[i]
      rowsCount=filteredRows.length
      minHeight=500
      toolbar=<Toolbar enableFilter=true />
      onAddFilter=filter => setFilters(handleFilterChange(filter))
      onClearFilters=() => setFilters()
    />
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<Example rows=createRowData() />, rootElement);

【问题讨论】：

哪一行导致错误？

@DrewReese 更新了屏幕截图。

这 20 个折叠的堆栈帧中有哪些详细信息？ IE。调用堆栈是什么样的？这可以/应该提供一些提示，说明您的整个 Example 组件代码中有什么错误。

【参考方案1】：

我认为您的错误是因为您试图将函数呈现为组件。我的意思是 Example 不是一个组件，它是一个函数。所以当 React 尝试渲染 Example 时，他会搜索组件。

Example 是内置组件吗？ -> 没有

Example 是复合组件吗？ -> 没有

然后抛出错误。

试试这个：（不知道行不行）

ReactDOM.render(Example(createRowData()), rootElement);

我的意思是，尝试将函数调用到渲染中，而不是一个不存在的类。

【讨论】：

Example 是一个功能组件。我不确定您所说的“内置”或“复合”组件是什么意思。

非虚拟机。在 Google 上搜索该错误时，我看到一些人使其工作发生变化：import ReactDataGrid from "react-data-grid"; 到 const ReactDataGrid = require('react-data-grid');