Question

我只是在我的暂存环境中测试时才遇到以下错误，尽管代码在本地运行时运行时没有错误。

Uncaught 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.

有两种方法可以在不触发错误的情况下加载视图。

我删除了onClick={handleClick}样式组件

<Tabs />

如果我明确将单个<Tab />组件定义为spans，即<span data-filter="yourTasks">Your Tasks</span>

List组件

import React from 'react';
import styled from 'styled-components';

import ListItem from '../components/ListItem';

const List = ({ handleFiltering, listItems, match }) => {
  const handleClick = (e) => {
    handleFiltering(e.target.dataset.filter);
  }

  return (
    <ListWrapper>
      <Tabs onClick={handleClick}>
        <Tab data-filter="yourTasks">Your Tasks</Tab>
        <Tab data-filter="allTasks">All Tasks</Tab>
        <Tab data-filter="assignedTasks">Assigned</Tab>
      </Tabs>

      { _.map(listItems, item => <ListItem key={item._id} item={item} /> )}
    </ListWrapper>
  );
}

const ListWrapper = styled.section`
  flex: 1;
`;

const Tabs = styled.div`
  display: flex;
  margin-bottom: 10px;
`;

const Tab = styled.span`
  background-color: #F6F6F6;
`;

export default List;

<{1}}已定义

ListContainer

我确实没有运气"master" invariant SO post。

Answer 1

正如Rick Jolly在评论中提到的那样，问题是在组件声明之后定义了样式组件。

我认为这很可能是因为捆绑产品/分期时的情况如何缩小，但如果有人知道更多，欢迎提供更多反馈。

@ rick-jolly，随意发布回答，我会将您的归因于已接受的解决方案。

反应不变错误

1 个答案: