Question

当我尝试使用组件时出现以下错误

Uncaught Invariant Violation: 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. Check the render method of `MemberSearchBar`.

我阅读了其他堆栈问题，它是关于默认情况下导出它的，我已经这样做了。我正在导入组件，例如：

import MemberSearchBar from './member-search-bar';（我完全确定导入路径正确）

然后我就在使用它，例如<MemberSearchBar />

该组件的代码为

import React, { Component } from 'react';
import debounce from 'lodash/debounce';
import { StyledSearchInput } from './member-search-bar.styles';

export default class MemberSearchBar extends Component {
  state = {
    searchText: '',
  };

  handleChange = e => {
    this.setState({ searchText: e.target.value });
    debounce(this.state.searchText, 300);
  };

  render() {
    return (
      <React.Fragment>
        <StyledSearchInput
          isInline
          isSmall
          onChange={this.handleChange}
          value={this.state.value}
        />
      </React.Fragment>
    );
  }
}

有人对我为什么有这个想法有想法吗？

Answer 1

该错误是由于“ StyledSearchInput”组件引起的。

在这种情况下，反应无法找到有效的组件。

'./ member-search-bar.styles'路径错误或组件构造错误。

还可以与member-search-bar共享文件。

反应：元素类型是无效错误，不应该发生

1 个答案: