Reactjs react数据网格自动完成编辑器不工作 import React，{Component}来自“React” 从“react数据网格”导入ReactDataGrid 从“不变性助手”导入更新 从“react data grid addons”导入{编辑器、格式化程序} const{AutoComplete，AutoCompleteEditor，DropDownEditor}=Editors 常量{DropDownFormatter}=格式化程序 const productNames=[ { id:0， 标题：“productName1”， }, { id:1， 标题：'productName2' }, ] const productNamesEditor= 常量列=[ { 键：“id”， 名称：“ID”， }, { 关键字：“产品名称”， 名称：'产品名称'， 是的， 编辑：productNamesEditor， }, { 关键字：“产品数量”， 名称：“产品数量”， 是的， }, { 关键词：“产品价格”， 名称：“产品价格”， 是的， }, { 关键词：“产品光盘”， 名称：'产品光盘'， 是的， }, ] 类LineItems扩展组件{ 建造师（道具）{ 超级（道具） 这是。_columns=columns console.log（此列） this.state={rows:this.props.lineItems.rows} } rowGetter=（i）=>{ 返回此.state.rows[i]； }; handleGridRowsUpdated=（{fromRow，toRow，updated}）=>{ console.log（fromRow） console.log（已更新） //不带参数调用slice（）会生成数组的副本 让rows=this.state.rows.slice（）； for（让i=fromRow；i ) } } 导出默认行项目

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

检查

EditorContainer

的渲染方法

---

网格渲染。如果我尝试输入/编辑已设置自动补全编辑器的单元格，则会出现上述错误。

代码中的小错误：

import React, {Component} from 'react'
import ReactDataGrid from 'react-data-grid'
import update from 'immutability-helper'
import { Editors, Formatters } from 'react-data-grid-addons'

const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
const { DropDownFormatter } = Formatters
const productNames = [
  {
    id: 0,
    title: 'productName1',
  },
  {
    id: 1,
    title:'productName2'
  },
] 
const productNamesEditor = <AutoCompleteEditor options={productNames} />
const columns= [
  {
    key: 'id',
    name: 'ID',
  },
  {
    key: 'product_name',
    name: 'Product Name',
    editable: true,
    editor: productNamesEditor,
  },
  {
    key: 'product_qty',
    name: 'Product Qty',
    editable:true,
  },
  {
    key: 'product_rate',
    name: 'Product Rate',
    editable:true,
  },
  {
    key: 'product_disc',
    name: 'Product Disc',
    editable:true,
  },

]
class LineItems extends Component {
  constructor(props) {
    super(props)
    this._columns = columns
    console.log(this._columns)
    this.state = {rows: this.props.lineItems.rows}
  }


  rowGetter = (i) => {
    return this.state.rows[i];
  };

  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    console.log(fromRow)
    console.log(updated)
    // calling slice() without arguments makes a copy of array
    let rows = this.state.rows.slice();

    for (let i = fromRow; i <= toRow; i++) {
      let rowToUpdate = rows[i];
      let updatedRow = update(rowToUpdate, {$merge: updated});
      rows[i] = updatedRow;
      this.setState({ rows })
      this.props.onGridRowsUpdated(rows)


    }
  }
  render () {
    return (
      <ReactDataGrid
        ref={node => this.grid=node}
        enableCellSelect={true}
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this.state.rows.length}
        maxHeight={300}
        onGridRowsUpdated={this.handleGridRowsUpdated}

      />
    )
  }
}

export default LineItems

应该是

const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors

const {AutoComplete: AutoCompleteEditor, DropDownEditor} = Editors