当我将nothingundefined作为值传递给我创建的子组件时，发生了这个问题。我做了这个<MyComponent src="" />导致错误。然后将其更改为<MyComponent src=" " />，因为我真的不想传递任何东西…问题解决了。

当我将nothingundefined作为值传递给我创建的子组件时，发生了这个问题。我做了这个<MyComponent src="" />导致错误。然后将其更改为<MyComponent src=" " />，因为我真的不想传递任何东西…问题解决了。

对于我来说，这发生在我试图将命名导入作为默认导入时，所以我得到了这个错误

import ProductCard from '../../../components/ProductCard' // that what caused the issue

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TopVente`.

所以我必须通过名称导入来修复它

import { ProductCard } from '../../../components/ProductCard'

当我将css文件添加到与组件文件相同的文件夹时，我遇到了这个问题。

我的重要陈述是:

import MyComponent from '../MyComponent'

当只有一个文件MyComponent.jsx时，这很好。(我在一个例子中看到了这种格式，并尝试了一下，然后忘记了我已经做到了)

当我添加MyComponent时。将SCSS导入到同一文件夹，则导入失败。也许JavaScript反而加载了.scss文件，所以没有出现错误。

我的结论是:即使只有一个文件，也要指定文件扩展名，以防稍后添加另一个文件。

简而言之，不知何故发生了以下情况:

render() {
    return (
        <MyComponent /> // MyComponent is undefined.
    );
}

它不一定与某些不正确的输入或输出有关:

render() {
    // MyComponent may be undefined here, for example.
    const MyComponent = this.wizards[this.currentStep];

    return (
        <MyComponent />
    );
}

所以我遇到了这个问题，我用一种奇怪的方式解决了它。我想我应该把它扔了，以防其他人遇到它，变得绝望。

我有一个有条件地呈现react元素，它只在对象状态大于零时才会呈现。在呈现函数中-当三元运算符被证明为真时，我收到了这篇文章所涉及的错误。我使用了一个<React。片段>在我的渲染函数-这是我通常分组子的方式，而不是更新的方式与更新的短语法(<>和</>)。

However, when I changed the <React.Fragment> to the short syntax - the react element rendered correctly and the error stopped appearing. I took a look at Facebooks React-Fragment documentation, and I don't see any reason on there to believe there is a dramatic difference between the two that would cause this. Regardless, below are two simplified snippets of code for your review. The first one demonstrates the code that was yielding the error, and the second one demonstrates the code that fixed the issue. At the bottom is the render function of the component itself.

希望有人觉得这有帮助。

代码示例1 -错误 有条件渲染的React元素

  renderTimeFields = () => {
    return (
      <React.Fragment>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </React.Fragment>
    );
  }

代码示例2 -无错误 有条件渲染的React元素

  renderTimeFields = () => {
    return (
      <>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </>
    );
  }

在组件中呈现函数

render() {
<form>
...
{emailsInActiveScript > 1 ? this.renderTimeFields() : null}
</form>
etc...
}