反应不变错误

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.

有两种方法可以加载视图而不触发错误。

我删除了 <Tabs /> styled-component

onClick={handleClick}

如果我将单个 <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;

来自定义了 handleFiltering 的父 ListContainer 组件

...

handleFiltering(filterType, list) {
  list = list || this.state.list;

  const filterTypes = {
    allTasks: () => list,
    yourTasks: () => (list.filter(item => item.assignedTo === this.userId)),
    assignedTasks: () => (list.filter(item => item.createdBy === this.userId)),
  }

  this.setState(() => {
    return { filteredList: filterTypes[filterType]() }
  });
}

...

我运行通过了，运气不好。

Answer 1

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

我认为这可能是因为 prod/staging 捆绑时东西被缩小了，但如果有人知道更多，欢迎提供更多反馈。

@rick-jolly，请随意 post 作为答案，我会将你的作为公认的解决方案。

反应不变错误

React invariant error

reactjs

styled-components