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

Question

我收到以下错误：

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

检查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);

Answer 1

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

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

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

然后抛出错误。

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

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

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