错误：缩小反应错误 #130 [重复]

Posted 2023-02-21

【中文标题】错误：缩小反应错误 #130 [重复]

【英文标题】：Error: Minified React error #130 [duplicate]

【发布时间】：2018-10-29 21:35:37

【问题描述】：

我在文件 ./MyInput.react.js 中有以下 ReactJs 组件

import React from 'react';

export default class MyInput extends React.Component 
  constructor(props) 
    super(props);
    this.id = getNextId();

    this.onChange = this.onChange.bind(this);
  
  onChange(e) 
    this.props.onChange(e.target.value);
  
  render() 
    return (
      <label htmlFor=this.id>
        this.props.label      
        <input
          id=this.id
          value=this.props.value 
          onChange=this.onChange
          />
      </label>
    );
  

现在我尝试像这样将它导入 ./index.js：

import MyInput from './MyInput.react';

控制台返回错误：

Error: Minified React error #130

你刚才遇到的错误全文是：

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined.

这有什么问题？

【问题讨论】：

如果你搜索那个错误，你会发现超过 50 个 SO 结果，Link。所以不需要添加新的问题和答案:)

你是对的。每个问题在某种形式的某个地方都有一个答案。对于我的案例，我没有找到对异常“错误：缩小反应错误 #130”的快速直接解释。因此，我认为这个解释会帮助那些发现自己处于同样情况的人。

我遇到了这个错误，与类中作为 JSX.Element 的箭头函数有关。例如class myClass extends Component CustomElement = () => return render() return 在测试和调试中，没有什么可抱怨的。部署和发布时，它会崩溃并给出上面的错误。解决方案，渲染如下 customElement = () => return 解决方案...使用 this.customElement()

渲染它

【参考方案1】：

答案很简单。但是，要快速找到问题并不容易。 导出默认情况下需要不带大括号的导入：

export default class MyInput extends React.Component 
  ...


import MyInput from './MyInput.react';

或者您可以使用命名的导出（没有单词默认值）。然后你需要在导入中使用大括号：

export class MyInput extends React.Component 
  ...

  
import  MyInput  from './MyInput.react';

附：由于查找对变量（类、函数等）的引用的清晰和简单，一些开发人员认为命名导出/导入是一种很好的做法。

【讨论】：

你值得拥抱！

救命稻草。我的敬意。